JQuery EasyUI DataGrid 纵向（转置）表格插件 TransposedView

最新推荐文章于 2020-09-23 16:09:11 发布

weixin_30455023

最新推荐文章于 2020-09-23 16:09:11 发布

阅读量644

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mergen/p/4863937.html

版权

在页面上显示表格时，有时会遇到有些表格的列非常多，而行却比较少。例如财务报表，往往有几十列，行却只有最多三行，显示在页面上的话页面会被极大地拉宽，体验不好。通常的做法是把这种表格改为纵向显示，像矩阵的转置一样，行变成‘列’，列变成‘行’。该插件即可为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	每行的宽度。由于变为纵表，所有行都一样宽。

在下载的文件中有完整例子。有任何问题请留言。

转载于:https://www.cnblogs.com/mergen/p/4863937.html

weixin_30455023

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI DataGrid 纵向（转置）表格插件 TransposedView

在页面上显示表格时，有时会遇到有些表格的列非常多，而行却比较少。例如财务报表，往往有几十列，行却只有最多三行，显示在页面上的话页面会被极大地拉宽，体验不好。通常的做法是把这种表格改为纵向显示，像矩阵的转置一样，行变成‘列’，列变成‘行’。该插件即可为DataGrid添加纵向排列表格的功能。效果图如下：插件下载：http://files.cnblogs.com/files/mergen/...
复制链接

扫一扫