如何在 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: blocktr - display: inline-blocktd 他们将彼此重叠,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 网格中的行和列?的主要内容,如果未能解决你的问题,请参考以下文章

如何更改 MVC 网格单元的 Kendo UI 的背景颜色

弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口

MVC Grid 的 Kendo UI 如何隐藏 ID 列

如何根据 kendo ui mvc 网格中的条件格式化行

如何在 MVC5 中访问 Kendo UI 网格内的实体框架域对象

如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构