EasyUI 網格一主多從從表使用自定義樹狀展開

時間 2019-11-12

標籤 easyui 網格使用自定義樹狀展開简体版

原文原文鏈接

1                     <table id="Table1" class="easyui-datagrid" title="標題" style="width: 100%;"
2                         data-options="fitColumns:true,rownumbers:true,singleSelect:true,striped:true,collapsible:true,pagination:true,pageSize:3,pageList:[3,6,9],url:'ajax路徑'">
3                         <thead>
4                             <tr>
5                                 <th></th>
6                             </tr>
7                         </thead>
8                     </table>

上面是最基本的主表下面是對應的子表jquery

1         <table id="Table_dg" class="easyui-datagrid"
2             data-options="fitColumns:true,rownumbers:true,singleSelect:true,striped:true,collapsible:true,url:'ajax路徑'">
3             <thead>
4                 <tr>
5                     <th data-options="field:'字段名'"></th>
6                 </tr>
7             </thead>
8         </table>

這裏用到了一個插件須要引入一個js包 jquery-easyui-datagridviewajax

接下來是對應的js代碼數組

 1             $('Table1').datagrid({
 2                 onSelect: function (index, rowdata) {//用戶選擇一行時觸發，index下標 rowdata被選中行數據 singleSelect 只能選中一行
 3 
 4                     //獲取到子表的數據
 5                     $('#Table_dg').datagrid({
 6                         view: view,//展現視圖
 7                         url: '',//ajax請求的地址
 8                         queryParams: {//須要傳遞的多個參數
 9 
10                         },
11                         detailFormatter: function (index, row) {//擴展行展現數據 告訴用戶 具體返回是的是個什麼樣子的容器
12                             return '<div></div>';
13                         },
14                         onLoadSuccess: function () {//當數據載入成功時觸發
15                             var row = $("#Table_dg").datagrid("getRows");//返回當前頁的記錄
16                             for (var r = 0; r < row.length; r++) {
17                                 $("#Table_dg").datagrid("expandRow", r);//展開對應行
18                             }
19                             $('#Table_dg').datagrid('collapseGroup');//自動修正高度,可是會出BUG,因此加上一個摺疊的動做，直接樣式就fix完畢
20                         },
21                         onExpandRow: function (index, row) {//多層列表定義  
22                             var ddv = $(this).datagrid('getRowDetail', index).find('剛纔在擴展行寫的內容');//獲取到擴展行的容器
23                             ddv.datagrid({//獲取到子表的從表的數據
24                                 queryParams: {//傳遞的多個參數
25 
26                                 },
27                                 url: "",//ajax 訪問的地址
28                                 fitColumns: true,//自動填滿寬度
29                                 singleSelect: true,//只能選中單行
30                                 rownumbers: true,//排序
31                                 loadMsg: '',//加載中提示信息
32                                 height: 'auto',//高度自適應
33                                 columns: [[//對應列綁定數據
34                                 { field: '後臺傳過來的對應的數據', title: '擡頭' },
35                                 ]],
36                                 onResize: function () {//該事件獲取高度寬度 可進行調整
37                                     $('#Table_dg').datagrid('fixDetailRowHeight', index);
38                                     $('#Table_dg').datagrid('collapseGroup');//自動修正高度,可是會出BUG,因此加上一個摺疊的動做，直接樣式就fix完畢
39                                 },
40                                 onLoadSuccess: function () {//數據載入成功觸發
41                                     $('#Table_dg').datagrid('collapseGroup');//自動修正高度,可是會出BUG,因此加上一個摺疊的動做，直接樣式就fix完畢
42                                     setTimeout(function () {
43                                         $('#Table_dg').datagrid('fixDetailRowHeight', index);
44                                     }, 0);
45                                 }
46                             });
47                             $('#Table_dg').datagrid('fixDetailRowHeight', index);
48                             $('#Table_dg').datagrid('collapseGroup');//自動修正高度,可是會出BUG,因此加上一個摺疊的動做，直接樣式就fix完畢
49                         }
50                     });
51                 }
52             });

對於展開的多層表格進行單行選擇操做ui

 1             $("按鈕").click(function () {
 2                 var details = [];
 3                 var detail;
 4                 for (var i = 0; i < $('.ddv').length; i++) {
 5                     detail = $('.ddv').eq(i).datagrid('getSelected');//經過判斷每一個表格選中行的值 
 6                     if (detail != null) {
 7                         details.push(detail);//將被選中的行的值填充進數組中
 8                     }
 9                 }
10                 if (details.length > 1) {//若是數組長度大於1 說明有多條數據被選中 提示用戶 以及刷新選中狀態
11                     alert("只能選取一條數據");
12                     //自動取消選擇狀態
13                     $('#Table_dg').datagrid('rejectChanges');
14                     editIndex = undefined;
15                 }
16                 else {//一條數據
17                     var row = details[0];
18                     if (row) {
19                       //彈窗什麼的
20                     }
21                     else alert("請選擇一條記錄進行編輯！");
22                 }
23             });