备案网站电子照幕布网页设计培训

一、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.脚本写法

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

$('#acquisitionTab').datagrid({view: detailview,//注意1title: '我的取数',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){//注意2return '<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的写法上加的内容

三、说下注意事项

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

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