在页面上显示表格时,有时会遇到有些表格的列非常多,而行却比较少。例如财务报表,往往有几十列,行却只有最多三行,显示在页面上的话页面会被极大地拉宽,体验不好。通常的做法是把这种表格改为纵向显示,像矩阵的转置一样,行变成‘列’,列变成‘行’。该插件即可为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 | 每行的宽度。由于变为纵表,所有行都一样宽。 |
在下载的文件中有完整例子。有任何问题请留言。
时间: 2024-07-30 03:15:37