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

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 }

            ]
           ]
        });
View Code

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

 

 

======================== 我是茗洋芳竹,欢迎加群 :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 class="easyui-datagrid" id="dg">
                                    <thead>
                                        <tr>
                                            <th data-options="field:'InsureNo',align:'center', formatter: outputFormatter " rowspan="2">
                                                投保单号
                                            </th>
                                            <th data-options="field:'Applicant',align:'center'" rowspan="2">
                                                投保人
                                            </th>
                                            <th data-options="field:'Insurant',align:'center'" rowspan="2">
                                                被保险人
                                            </th>
                                            <th data-options="field:'CompanyName',align:'center'" rowspan="2">
                                                保险公司
                                            </th>
                                            <th data-options="field:'ProductShow',align:'center'" rowspan="2">
                                                产品类型
                                            </th>
                                            <th data-options="field:'GetMoney',align:'center'" rowspan="2">
                                                保费
                                            </th>
                                            <th data-options="field:'PayeeName',align:'center', formatter: MoneyFormatter " rowspan="2">
                                                收款方
                                            </th>
                                            <th data-options="field:'ProductShow',align:'center'" rowspan="2">
                                                产品类型
                                            </th>
                                            <th colspan="5">
                                                状态
                                            </th>
                                             <th data-options="field:'Id',align:'center',formatter: viewC" rowspan="2">
                                                操作
                                            </th>
                                        </tr>
                                        <tr>
                                            <th data-options="field:'OutStateName',align:'center', formatter: OutStateFormatter ">
                                                出单状态
                                            </th>
                                            <th data-options="field:'ReceiveStateName',align:'center', formatter: ReceiveStateFormatter ">
                                                收款状态
                                            </th>
                                            <th data-options="field:'PayStateName',align:'center', formatter: PayStateFormatter">
                                                付款状态
                                            </th>
                                            <th data-options="field:'SendStateName',align:'center', formatter: SendStateFormatter ">
                                                寄送状态
                                            </th>
                                            <th data-options="field:'ReceStateName',align:'center', formatter: ReceStateFormatter">
                                                签收状态
                                            </th>
                                        </tr>
                                    </thead>
                                </table>
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丰富资源群)

 

posted @ 2013-05-14 17:47  AYUI框架  阅读(...)  评论(...编辑  收藏
【推荐】 程序员网址大全  |  WPF4.5(更新50篇)  |  百度地图.NET  |  MyNPOI  |  开源  |  我的皮肤  |  ASP.NET MVC4  |  前端提升   |  LINQ(9篇完结)   |  WCF   |  EasyUI  |