在頁面上顯示表格時，有時會遇到有些表格的列非常多，而行卻比較少。例如財務報表，往往有幾十列，行卻只有最多三行，顯示在頁面上的話頁面會被極大地拉寬，體驗不好。通常的做法是把這種表格改為縱向顯示，像矩陣的轉置一樣，行變成‘列’，列變成‘行’。該插件即可為DataGrid添加縱向排列表格的功能。
效果圖如下：
插件下載：http://files.cnblogs.com/files/mergen/jquery-easyui-datagrid-transposedview.zip
使用步驟：
Step 1: 創建頁面
<head> <script type="text/javascript" src="datagrid-transposedview.js"></script> </head> <body> <table id="tt"></table> </body>
Step 2: 添加表格
$('#tt').datagrid({
view:transposedview,
title:'DataGrid - TransposedView - Profit & Loss Statement',
width:500,
height:250,
singleSelect:true,
nowrap:false,
data:{
"total":3,
"rows":[
{
"Year":"2012",
"Product sales":"$12,000",
"Service sales":"$3,000",
"Total Operating Revenue":"$15,000",
"Cost of goods sold":"$7,000",
"Gross Profit":"$8,000",
"Rent":"$1,500",
"Insurance":"$250",
"Office suppliese":"$150",
"Utilities":"$100",
"Total Overhead":"$2,000",
"Operating Income":"$6,000",
"Loan interest":"($500)",
"Earnings Before Income Taxes":"$5,500",
"Income Taxes":"$500",
"Net Earnings":"$5,000"
},
{
"Year":"2013",
"Product sales":"$15,000",
"Service sales":"$4,000",
"Total Operating Revenue":"$16,000",
"Cost of goods sold":"$8,000",
"Gross Profit":"$9,000",
"Rent":"$2,500",
"Insurance":"$250",
"Office suppliese":"$150",
"Utilities":"$200",
"Total Overhead":"$3,100",
"Operating Income":"$7,000",
"Loan interest":"($800)",
"Earnings Before Income Taxes":"$6,500",
"Income Taxes":"$700",
"Net Earnings":"$5,500"
},
{
"Year":"2014",
"Product sales":"$20,000",
"Service sales":"$6,000",
"Total Operating Revenue":"$25,000",
"Cost of goods sold":"$11,000",
"Gross Profit":"$12,000",
"Rent":"$2,500",
"Insurance":"$550",
"Office suppliese":"$350",
"Utilities":"$500",
"Total Overhead":"$7,000",
"Operating Income":"$12,000",
"Loan interest":"($900)",
"Earnings Before Income Taxes":"$8,500",
"Income Taxes":"$700",
"Net Earnings":"$9,000"
}
]
},
columns:[[
{field:'Year',title:'Year',align:'right'},
{field:'Product sales',title:'Product ID',align:'right'},
{field:'Service sales',title:'List Price',align:'right'},
{field:'Total Operating Revenue',title:'Total Operating Revenue',align:'right'},
{field:'Cost of goods sold',title:'Unit Cost',align:'right'},
{field:'Gross Profit',title:'Gross Profit',align:'right'},
{field:'Rent',title:'Attribute',align:'right'},
{field:'Insurance',title:'Status',align:'right'},
{field:'Office suppliese',title:'Office suppliese',align:'right'},
{field:'Utilities',title:'Utilities',align:'right'},
{field:'Total Overhead',title:'Total Overhead',align:'right'},
{field:'Operating Income',title:'Operating Income',align:'right'},
{field:'Loan interest',title:'Loan interest',align:'right'},
{field:'Earnings Before Income Taxes',title:'Earnings Before Income Taxes',align:'right'},
{field:'Income Taxes',title:'Income Taxes',align:'right'},
{field:'Net Earnings',title:'Net Earnings',align:'right'}
]]
});
參數列表：
| 名稱 | 類型 | 描述 |
| headerWidth | number | 表頭的寬度。由於變為縱表，所有表頭都一樣寬。 |
| itemWidth | number | 每行的寬度。由於變為縱表，所有行都一樣寬。 |
在下載的文件中有完整例子。有任何問題請留言。