| 【EasyUI DataGrid DetailView】表格嵌套子表格 | 您所在的位置：网站首页 › easyui表格 › 【EasyUI DataGrid DetailView】表格嵌套子表格 |
【EasyUI DataGrid DetailView】表格嵌套子表格
|
一、功能描述
在做项目的时候，要求能够对某一行的数据进行折叠显示，用来查看该行的详细信息。拟通过采用easyui的detailview创建表格分组，大致的效果图如下所示： 
二、使用方法
本篇博客承接以前的一篇博客：https://blog.csdn.net/wilson_m/article/details/81334583 即所要实现的功能为：点击柱状图显示该数据的详细信息，折叠打开某一行，显示该行的详细数据信息。 该功能依赖于datagrid-detailview.js文件，网上下载便可。 注意：引入该js的时候，该js的位置一定要在jquery.easyui.min.js的下方，不然在detailview.js中会报以下错误： 
属性 名称 类型 描述 默认值 detailFormatter function(index,row) 返回行明细内容的格式化函数事件 名称 参数 描述 onExpandRow index,row 当展开一行时触发。 onCollapseRow index,row 当折叠一行时触发。方法 名称 参数 描述 fixDetailRowHeight index 固定明细行的高度。 getExpander index 获取行扩展对象。 getRowDetail index 获取行明细容器。 expandRow index 展开一行。 collapseRow index 折叠一行。 2.1 表格嵌套js代码如下 myChart.on('click', function (params) { if (params.componentType === 'series') { if (params.seriesType === 'bar') { var selectItemValueRec=params.name; $('#dg1').datagrid({ url: '/getStatisticDataGridList', method: 'get', queryParams: { sourceItemValue: sourceItemValue, groupItemValue: groupItemValue, selectItemValueRec: selectItemValueRec }, border: false, singleSelect: false, fit: true, collapsible: false, pagination: true, pageSize:30, pageList:[10,30,50,70,100], fitColumns: true, view: detailview, detailFormatter:function(index,row){ return ''; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); ddv.datagrid({ url:'getEchartsDetailInfo', queryParams:{ traintype:row.traintype, trainNo:row.trainNo }, method: 'get', border: true, fitColumns:true, singleSelect:true, rownumbers:true, loadMsg:'加载中，请稍后...', height:'auto', columns:[[ {field:'traintype',title:'培训类型',width:200}, {field:'trainNo',title:'培训编号',width:200}, {field:'teacherNo',title:'教师工号',width:200}, {field:'teacherName',title:'教师姓名',width:200}, {field:'workUnit',title:'工作单位',width:200}, {field:'teacherAge',title:'教师年龄',width:200} ]], onResize:function(){ $('#dg1').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ $('#dg1').datagrid('fixDetailRowHeight',index); } }); $('#dg1').datagrid('fixDetailRowHeight',index); } }); $('#window1').window('open'); } } }); 2.2 后台代码如下 //mapper层 @Select("select * from v_all where traintype = #{traintype} and trainNo = #{trainNo}") public List getEchartsDetailInfo(@Param( "traintype" ) String traintype,@Param( "trainNo" ) String trainNo); //service层 public List getEchartsDetailInfo(String traintype,String trainNo){ return integratedQueryMapper.getEchartsDetailInfo(traintype, trainNo); } //controller层 @RequestMapping(value = "/getEchartsDetailInfo",method = {RequestMethod.GET, RequestMethod.POST}) @ResponseBody public Map getEchartsDetailInfo(@RequestParam("traintype") String traintype, @RequestParam("trainNo") String trainNo, HttpSession session,HttpServletRequest request){ List getEchartsDetailInfo = integratedQueryService.getEchartsDetailInfo(traintype,trainNo); Map resultMap=new HashMap(); resultMap.put("rows",getEchartsDetailInfo); return resultMap; } 2.4 datagrid-detailview.js代码如下 $.extend($.fn.datagrid.defaults, { autoUpdateDetail: true // Define if update the row detail content when update a row }); var detailview = $.extend({}, $.fn.datagrid.defaults.view, { render: function(target, container, frozen){ var state = $.data(target, 'datagrid'); var opts = state.options; if (frozen){ if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){ return; } } var rows = state.data.rows; var fields = $(target).datagrid( |
【本文地址】
公司简介
联系我们