如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列?
Posted
技术标签:
【中文标题】如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列?【英文标题】:How to transpose rows and columns in a Kendo UI grid in MVC application? 【发布时间】:2015-12-28 00:08:06 【问题描述】:我在我的 MVC 应用程序中使用 Kendo Ui Grid。 我希望在我的网格中显示多个国家的统计数据。从数据库中检索数据的方式,我的网格会显示如下数据:
Country Area Population GDP GDP Growth
India 3288000 1220200000 1.848 6.8
USA 9827000 314686189 15.09 1.7
但不是上面的格式,我希望它显示如下:
Country India USA
Area 3288000 9827000
Population 1220200000 314686189
GDP 1.848 15.09
GDP Growth 6.8 1.7
我怎样才能实现这种换位?
【问题讨论】:
我不认为开箱即用。此外,当您的数据库中有许多国家/地区时,我可以看到严重的性能问题。 如果 Grid 是只读的(不需要编辑/删除/插入),我们可以实现它吗? 我很难想象网格的配置。我并不是说它不起作用,但如果可以,您可能需要一些认真的解决方法。您可能需要在 javascript 中完成所有操作。我首先将每个单元格的类型定义为string
(因为类型是在 column 级别定义的......)并将第一列(“Country”)设置为固定。跨度>
有什么建议可以替代剑道网格,信号器有很多列要显示?
这很好,但很假。 1 因为导出到 excel 没有转置。 2 因为当我们使用剑道网格作为另一个网格的数据源时,当用户选择单元格时(在 grid2 中显示该行和列)。这个预览实际上没有被调换。 3 grid2作为用户预览然后导出到excel然后绘制另一个amcharts(当数据有效时)。所以我们不能那样做。有没有办法通过为 coll 创建另一个数组并通过这个***.com/q/17428587/308578 转置数据来实际转置
【参考方案1】:
如果有人偶然发现此问题,最重要的是您需要设置td
属性display: block
和tr
- display: inline-block
。 td
他们将彼此重叠,tr
将彼此相邻。
#grid .k-grid-header float: left; padding: 0 !important;
#grid .k-grid-content width: 1000px; height: 300px !important
#grid table width: auto; white-space: nowrap;
#grid tr display: inline-block;
#grid thead tr display: inline;
#grid th, #grid td display: block; border: 1px solid black; height: 30px; padding:15px;
正在工作dojo fiddle。
【讨论】:
它可以工作,但在标题列下方显示内容列,而不是并排显示列。 dojo fiddle 在这里也有同样的问题。这可能是什么问题? 网格并非设计为具有水平流动。您只需要找到要覆盖的 css 属性。让你开始 - dojo.telerik.com/edajo/16 它工作正常。我对网格样式进行了细微更改,如#grid .k-grid-header float: left;填充:0!重要; #grid table 显示:块; #grid tr 显示:内联块; #grid thead tr 显示:内联; #grid th,#grid td 显示:块;溢出:隐藏;边框样式:实心;边框宽度:0 0 1px 1px;填充:.5em .6em .4em .6em;空白:nowrap;文本溢出:省略号;文本对齐:左;高度:2em;宽度:自动;字体大小:11px; 谢谢,您的 css 是在我自己的网格上进行转置的一个很好的起点。真的很惊讶剑道自然不支持这个以上是关于如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列?的主要内容,如果未能解决你的问题,请参考以下文章
弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口