When you display a table on a page, you sometimes encounter some tables with very many columns and fewer rows. For example, the financial statements, often have dozens of columns, rows but only a maximum of three lines, displayed on the page page will be greatly widened, the experience is not good. The usual practice is to change the table to portrait orientation, like a matrix transpose, where rows become ' columns ' and columns become ' rows '. The plug-in adds the ability to vertically arrange tables for the DataGrid.
As follows:
Plugin Download: http://files.cnblogs.com/files/mergen/jquery-easyui-datagrid-transposedview.zip
Steps to use:
Step 1: Create a page
<Head> <Scripttype= "Text/javascript"src= "Datagrid-transposedview.js"></Script></Head><Body> <TableID= "tt"></Table></Body>
Step 2: Add a table
$ (' #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": "$ $", "Office Suppliese": "$ $", "Utilities": "$ $", "Total Overhead": "$2,000", "Operating Income": "$6,000", "Loan Interest": "($)", "Earnings before Income Taxes": "$5,500", "Income Taxes": "$", "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": "$ $", "Office Suppliese": "$ $", "Utilities": "$", "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": "$", "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: ' All 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: ' All 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 '} ]]});
Parameter list:
Name |
Type |
Describe |
Headerwidth |
Number |
The width of the table header. Because it becomes a vertical table, all the headers are the same width. |
Itemwidth |
Number |
The width of each row. Because it becomes a vertical table, all rows are the same width. |
A complete example is available in the downloaded file. Please leave a message if you have any questions.
JQuery Easyui DataGrid Portrait (transpose) Table plug-in Transposedview