Easyui datagrid detailview使用简介

比眉伴天荒 2022-08-07 11:44 293阅读 0赞

、easyui 的 detailview又叫subgrid其实也就类似于分组表格的意思，先见效果图

![Center][]

二、下面说下使用方法

1.页面引入样式

2.引入脚本

detailview.js官网下载的包应该没有，不过也很好获得，我们在看在线demo的时候可以看到detailview的路径，然后下载下来，这里就直接贴出了方便大家下载http://www.jeasyui.com/easyui/datagrid-detailview.js

3.脚本写法

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.    
2.   **<****table** id="acquisitionTab"**>****</****table****>**

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  $('\#acquisitionTab').datagrid(\{  
2.              view: detailview,//注意1  
3.              title: '我的取数',  
4.              url:'../json/queryAcquisitionList.action',  
5.              fitColumns: true,  
6.              singleSelect:true,  
7.              height: 340,  
8.              pagination: true,  
9.              columns: \[  
10.                 \[  
11.                     \{field: 'id', checkbox: true \},  
12.                     \{field: 'code', title: '任务编号'\},  
13.                     \{field: 'templateName', title: '主 题',width:50\},  
14.                     \{field: 'topic', title: '取数目的',width:50\}\}  
15.                 \]  
16.             \],  
17.             detailFormatter:function(index,row)\{//注意2  
18.                 return '**<****div** style="padding:2px"**>****<****table** id="ddv-' + index + '"**>****</****table****>****</****div****>**';  
19.             \},  
20.             onExpandRow:function(index,row)\{//注意3  
21.                 $('\#ddv-'+index).datagrid(\{  
22.                     url:'../statisticJson/getStatisticTaskByAcqu.action?idapStatisticTask.taskGroupId='+(row.id),  
23.                     fitColumns:true,  
24.                     singleSelect:true,  
25.                     height:'auto',  
26.                     columns:\[\[  
27.                         \{field:'taskId',title:'统计任务ID'\},  
28.                         \{field:'taskName',title:'任务名称',width:50\},  
29.                         \{field:'taskStatue',title:'任务状态',formatter:function(value, row, index)\{  
30.                             if (value) \{  
31.                                 switch (value) \{  
32.                                     case '0':  
33.                                         return '任务创建';  
34.                                         break;  
35.                                     case '1':  
36.                                         return '待执行';  
37.                                         break;  
38.                                     case '2':  
39.                                         return '执行中';  
40.                                         break;  
41.                                     case '3':  
42.                                         return '执行成功';  
43.                                         break;  
44.                                     case '4':  
45.                                         return '执行失败';  
46.                                         break;  
47.                                     case '-1':  
48.                                         return '任务取消';  
49.                                         break;  
50.                                     default :  
51.                                         return '已删除';  
52.                                         break;  
53.                                 \}  
54.                             \}  
55.                         \}\},  
56.                         \{field:'taskType',title:'任务说明',width:100\},  
57.                         \{field:'statisticOpera',title:'任务操作',width:50,align:'center',  
58.                             formatter:function(value, row, index)\{  
59.                                 if(row.taskStatue != '-2')\{  
60.                                     var tdContext = '<a href="\#this" οnclick="removeStatistic('\+(row.taskId)+')"**>**删除**</****a****>**  ';  
61.                                 \}  
62.                                 return tdContext;  
63.                         \}\}  
64.                     \]\],  
65.                     onResize:function()\{  
66.                         $('\#acquisitionTab').datagrid('fixDetailRowHeight',index);  
67.                     \},  
68.                     onLoadSuccess:function()\{  
69.                         setTimeout(function()\{  
70.                             $('\#acquisitionTab').datagrid('fixDetailRowHeight',index);  
71.                         \},0);  
72.                     \}  
73.                 \});  
74.                 $('\#acquisitionTab').datagrid('fixDetailRowHeight',index);  
75.             \}  
76.   
77.         \});

上述3点注意就是较基本datagride的写法上加的内容

三、说下注意事项

该样式表主要是一些图标的样式，笔者在使用中发现，若引入该样式在detailview下，父表无法获取选中，去掉则恢复正常，不知道其他朋友有没有遇到相关的情况，我这边就是暂时采用这样的处理方式

[Center]: /images/20220805/98a588e37a584e4d8054b44f00a12e1b.png
[view plain]: http://blog.csdn.net/pk490525/article/details/21047985#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/230684
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/230684/fork