茗洋Easy UI 部分問題解決系列專題[datagrid 復雜表頭]

本文轉載自查看原文 2013-05-14 17:47 5514 JavaScript/ 楊洋瘋狂C#/ 框架學習/ EasyUI

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豐富資源群）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 茗洋Easy UI 1.3.2 部分問題解決系列專題[Combo模糊匹配中文問題修復] 茗洋Easy UI 1.3.5 部分問題解決系列專題[自定義alert關閉時間，自動關] element ui table 表頭錯位問題解決 Element UI table 表格表頭錯位問題解決 element-ui中table表頭表格錯誤問題解決 easyExce輸出Excel只有表頭沒有數據問題解決 bootstrap table 表頭與內容不對齊問題解決 easyExce輸出Excel只有表頭沒有數據問題解決 EasyUI datagrid自適應問題解決 Easy UI DataGrid 與分頁