Easyui datagrid detailview使用简介-白红宇

Easyui datagrid detailview使用简介

阅读量：4036 次

发布时间：2019-05-24

本文共 2530 字，大约阅读时间需要 8 分钟。

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

二、下面说下使用方法

1.页面引入样式

2.引入脚本

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

3.脚本写法

[html]
 <!-- 查询结果显示 -->  
  <table id="acquisitionTab"></table>  

[html]
 $('#acquisitionTab').datagrid({  
             view: detailview,//注意1  
             title: '我的取数',  
             url:'../json/queryAcquisitionList.action',  
             fitColumns: true,  
             singleSelect:true,  
             height: 340,  
             pagination: true,  
             columns: [  
                 [  
                     {field: 'id', checkbox: true },  
                     {field: 'code', title: '任务编号'},  
                     {field: 'templateName', title: '主 题',width:50},  
                     {field: 'topic', title: '取数目的',width:50}}  
                 ]  
             ],  
             detailFormatter:function(index,row){//注意2  
                 return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';  
             },  
             onExpandRow:function(index,row){//注意3  
                 $('#ddv-'+index).datagrid({  
                     url:'../statisticJson/getStatisticTaskByAcqu.action?idapStatisticTask.taskGroupId='+(row.id),  
                     fitColumns:true,  
                     singleSelect:true,  
                     height:'auto',  
                     columns:[[  
                         {field:'taskId',title:'统计任务ID'},  
                         {field:'taskName',title:'任务名称',width:50},  
                         {field:'taskStatue',title:'任务状态',formatter:function(value, row, index){  
                             if (value) {  
                                 switch (value) {  
                                     case '0':  
                                         return '任务创建';  
                                         break;  
                                     case '1':  
                                         return '待执行';  
                                         break;  
                                     case '2':  
                                         return '执行中';  
                                         break;  
                                     case '3':  
                                         return '执行成功';  
                                         break;  
                                     case '4':  
                                         return '执行失败';  
                                         break;  
                                     case '-1':  
                                         return '任务取消';  
                                         break;  
                                     default :  
                                         return '已删除';  
                                         break;  
                                 }  
                             }  
                         }},  
                         {field:'taskType',title:'任务说明',width:100},  
                         {field:'statisticOpera',title:'任务操作',width:50,align:'center',  
                             formatter:function(value, row, index){  
                                 if(row.taskStatue != '-2'){  
                                     var tdContext = '<a href="#this" οnclick="removeStatistic('+(row.taskId)+')">删除</a>  ';  
                                 }  
                                 return tdContext;  
                         }}  
                     ]],  
                     onResize:function(){  
                         $('#acquisitionTab').datagrid('fixDetailRowHeight',index);  
                     },  
                     onLoadSuccess:function(){  
                         setTimeout(function(){  
                             $('#acquisitionTab').datagrid('fixDetailRowHeight',index);  
                         },0);  
                     }  
                 });  
                 $('#acquisitionTab').datagrid('fixDetailRowHeight',index);  
             }  
   
         });  

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

三、说下注意事项

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

你可能感兴趣的文章