Easyui datagrid detailview使用

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

二、下面说下使用方法

1.页面引入样式

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

2.引入脚本

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

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

3.脚本写法

[html]  view plain  copy

1. <!-- 查询结果显示 -->  
2.  <table id="acquisitionTab"></table>  

[html]  view plain  copy

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  row是action里边返回的列表的data值
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的写法上加的内容

三、说下注意事项

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

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