茗洋芳竹Easy UI 部分问题解决系列专题[datagrid 复杂表头]

原文 http://www.cnblogs.com/Fresh-Air/archive/2013/05/14/3077948.html

1. 合并 datagrid 的表头信息【基础】，茗洋芳竹尝试Easy API的例子的延伸

部分效果图：

部分代码：

 $('#dg').datagrid({
            url: getUrl(),
            method: 'post',
            fitColumns: true,
            pagination: isPage,
            rownumbers: true,
            singleSelect: true,
            nowrap: false,
            pageList: [15, 30, 45, 60],
            columns: [[
            { field: 'InsureNo', title: '投保单号', width: 150, align: 'center', formatter: outputFormatter, rowspan: 2 },
            { field: 'Applicant', title: '投保人', width: 110, align: 'center', rowspan: 2 },
            { field: 'Insurant', title: '被保险人', width: 110, align: 'center', rowspan: 2 },
            { field: 'CompanyName', title: '保险公司', width: 120, align: 'center', rowspan: 2 },
            { field: 'ProductShow', title: '产品类型', width: 150, align: 'center', rowspan: 2 },
            { field: 'GetMoney', title: '保费', align: 'center', width: 90, align: 'center', formatter: MoneyFormatter, rowspan: 2 },
            { field: 'PayeeName', title: '收款方', width: 80, align: 'center', rowspan: 2 },
            { title: '状态', align: 'center', colspan: 5 },
            { field: 'Id', title: '操作', align: 'center', width: 60, rowspan: 2,
                 formatter: function (value, row, index) {
                     var a = "<a href='javascript:view(" + value + ")'>查看</a>";
                     return a;
                 }
            }
            ], [
                { field: 'OutStateName', title: '出单状态', width: 80, align: 'center', formatter: OutStateFormatter },
                { field: 'ReceiveStateName', title: '收款状态', width: 80, align: 'center', formatter: ReceiveStateFormatter },
                { field: 'PayStateName', title: '付款状态', width: 80, align: 'center', formatter: PayStateFormatter },
                { field: 'SendStateName', title: '寄送状态', width: 80, align: 'center', formatter: SendStateFormatter },
                { field: 'ReceStateName', title: '签收状态', width: 80, align: 'center', formatter: ReceStateFormatter }

            ]
           ]
        });

 看代码你应该就能看懂了。

 

 

======================== 我是茗洋芳竹，欢迎加群 ：193247142 （WEB丰富资源群）==========

升级一下，此时你就要懂的原理了

效果图：

 

下面我来讲一下代码，让你随心所欲的可以使用了

 1  $('#dg').datagrid({
 2             url: getUrl(),
 3             method: 'post',
 4             fitColumns: true,
 5             pagination: isPage,
 6             rownumbers: true,
 7             singleSelect: true,
 8             nowrap: false,
 9             pageList: [15, 30, 45, 60],
10             columns: [[
11             { field: 'InsureNo', title: '投保单号', width: 150, align: 'center', formatter: outputFormatter, rowspan: 2 },
12             { title: '基本信息', align: 'center', colspan: 5 },
13             { field: 'PayeeName', title: '收款方', width: 80, align: 'center', rowspan: 2 },
14             { title: '状态', align: 'center', colspan: 5 },
15             { field: 'Id', title: '操作', align: 'center', width: 60, rowspan: 2,
16                  formatter: function (value, row, index) {
17                      var a = "<a href='javascript:view(" + value + ")'>查看</a>";
18                      return a;
19                  }
20             }
21             ], [
22                 { field: 'Applicant', title: '投保人', width: 110, align: 'center', rowspan: 2 },
23                 { field: 'Insurant', title: '被保险人', width: 110, align: 'center', rowspan: 2 },
24                 { field: 'CompanyName', title: '保险公司', width: 120, align: 'center', rowspan: 2 },
25                 { field: 'ProductShow', title: '产品类型', width: 150, align: 'center', rowspan: 2 },
26                 { field: 'GetMoney', title: '保费', align: 'center', width: 90, align: 'center', formatter: MoneyFormatter, rowspan: 2 }
27                  ,
28                 { field: 'OutStateName', title: '出单状态', width: 80, align: 'center', formatter: OutStateFormatter },
29                 { field: 'ReceiveStateName', title: '收款状态', width: 80, align: 'center', formatter: ReceiveStateFormatter },
30                 { field: 'PayStateName', title: '付款状态', width: 80, align: 'center', formatter: PayStateFormatter },
31                 { field: 'SendStateName', title: '寄送状态', width: 80, align: 'center', formatter: SendStateFormatter },
32                 { field: 'ReceStateName', title: '签收状态', width: 80, align: 'center', formatter: ReceStateFormatter },
33 
34 
35             ]
36 
37            ]
38         });

我们重点看从columns属性：

整体结构是这样子的      [   [一些列A],[一些列B]   ]

首先我们的表头是两行，所以，在A列系列里面，rowspan：2

到了合并列的地方，我们只显示表头的文字，添加 title属性，并使用colspan等于了5，接下来我们又添加了一个列来测试，然后又到了一个合并的地方，colspan=5

这两个合并的地方，我们可以理解为 一个占位符，每个占5列。

好了，接下来，我们看第二个[B列系列]

这里面的顺序还是很重要的，从上往下，共有10个，也就是对应上面的，5,5长度的两个占位符，1-5给第一个使用了colspan的位置，6-10给第二个

不知道你懂了没有？

 

 

======================== 我是茗洋芳竹，欢迎加群 ：193247142 （WEB丰富资源群）==========

再升级一下，这下要看你的理解了，你真的要掌握技巧了

效果图：

代码：

 $('#dg').datagrid({
            url: getUrl(),
            method: 'post',
            fitColumns: true,
            pagination: isPage,
            rownumbers: true,
            singleSelect: true,
            nowrap: false,
            pageList: [15, 30, 45, 60],
            columns: [
            [
            { field: 'InsureNo', title: '投保单号', width: 150, align: 'center', formatter: outputFormatter, rowspan: 3 },
            { title: '基本信息', align: 'center', colspan: 5 },
            { field: 'PayeeName', title: '收款方', width: 80, align: 'center', rowspan: 3 },
             { title: '状态', align: 'center', colspan: 5 },
            { field: 'Id', title: '操作', align: 'center', width: 60, rowspan: 3,
                formatter: function (value, row, index) {
                    var a = "<a href='javascript:view(" + value + ")'>查看</a>";
                    return a;
                }
            }
            ],[
                { field: 'Applicant', title: '投保人', width: 110, align: 'center', rowspan: 2 },
                { field: 'Insurant', title: '被保险人', width: 110, align: 'center', rowspan: 2 },
                { field: 'CompanyName', title: '保险公司', width: 120, align: 'center', rowspan: 2 },
                { field: 'ProductShow', title: '产品类型', width: 150, align: 'center', rowspan: 2 },
                { field: 'GetMoney', title: '保费', align: 'center', width: 90, align: 'center', formatter: MoneyFormatter, rowspan: 2 }
                 ,
                { title: '基本状态', align: 'center', colspan: 3 },
                { title: '高级状态', align: 'center', colspan: 2 }

           ],
           [
                { field: 'OutStateName', title: '出单状态', width: 80, align: 'center', formatter: OutStateFormatter },
                { field: 'ReceiveStateName', title: '收款状态', width: 80, align: 'center', formatter: ReceiveStateFormatter },
                { field: 'PayStateName', title: '付款状态', width: 80, align: 'center', formatter: PayStateFormatter },
                { field: 'SendStateName', title: '寄送状态', width: 80, align: 'center', formatter: SendStateFormatter },
                { field: 'ReceStateName', title: '签收状态', width: 80, align: 'center', formatter: ReceStateFormatter },
           ]

           ]
        });

对的，我们一共三行，第一行里面填充了2个占位符，每个长度为5

我们在第二长度5的占位符里面，继续开辟占位符，基本状态和高级状态，那么这些面的具体列在哪里呢

对的，我们继续在下面添加一个[上一个[]里面的占位列]，还是跟顺序有关。

懂了吗？

======================== 我是茗洋芳竹，欢迎加群 ：193247142 （WEB丰富资源群）==========

独家偏方，自定义表头，注意这里列可不能随便设宽度了，否则宽度会错位的，不过有办法解决的

①定义一个 table，并使用 class="easyui-datagrid"

table定义，自己定义一个表头

②开始javascript，补充剩余的属性

$('#dg').datagrid({
            url: getUrl(),
            method: 'post',
            fitColumns: true,
            pagination: isPage,
            rownumbers: true,
            singleSelect: true,
            nowrap: false,
            pageList: [15, 30, 45, 60]
        });

当然你也可以写在 上面的table中

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  

效果图：

 

我是茗洋芳竹，欢迎加群 ：193247142 （WEB丰富资源群）