如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列？
How to transpose rows and columns in a Kendo UI grid in MVC application?
我在我的 MVC 应用程序中使用 Kendo Ui 网格。
我希望在我的网格中显示多个国家的统计数据。我从数据库中检索数据的方式，我的网格会显示如下数据：
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
我怎样才能实现这种转置？
如果有人偶然发现这个问题，最重要的是您需要设置 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。
我在我的 MVC 应用程序中使用 Kendo Ui 网格。 我希望在我的网格中显示多个国家的统计数据。我从数据库中检索数据的方式，我的网格会显示如下数据：
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
我怎样才能实现这种转置？
如果有人偶然发现这个问题，最重要的是您需要设置 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。