一、功能描述

在做项目的时候，要求能够对某一行的数据进行折叠显示，用来查看该行的详细信息。拟通过采用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 '<div style="padding:2px"><table class="ddv"></table></div>';},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<All> getEchartsDetailInfo(@Param( "traintype" ) String traintype,@Param( "trainNo" ) String trainNo);//service层public List<All> getEchartsDetailInfo(String traintype,String trainNo){return integratedQueryMapper.getEchartsDetailInfo(traintype, trainNo);}//controller层@RequestMapping(value = "/getEchartsDetailInfo",method = {RequestMethod.GET, RequestMethod.POST})@ResponseBodypublic Map getEchartsDetailInfo(@RequestParam("traintype") String traintype, @RequestParam("trainNo") String trainNo, HttpSession session,HttpServletRequest request){List<All>  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('getColumnFields', frozen);var table = [];table.push('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');for(var i=0; i<rows.length; i++) {// get the class and style attributes for this rowvar css = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';var classValue = '';var styleValue = '';if (typeof css == 'string'){styleValue = css;} else if (css){classValue = css['class'] || '';styleValue = css['style'] || '';}var cls = 'class="datagrid-row ' + (i % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"';var style = styleValue ? 'style="' + styleValue + '"' : '';var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + i;table.push('<tr id="' + rowId + '" datagrid-row-index="' + i + '" ' + cls + ' ' + style + '>');table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));table.push('</tr>');table.push('<tr style="display:none;">');if (frozen){table.push('<td colspan=' + (fields.length+(opts.rownumbers?1:0)) + ' style="border-right:0">');} else {table.push('<td colspan=' + (fields.length) + '>');}table.push('<div class="datagrid-row-detail">');if (frozen){table.push('&nbsp;');} else {table.push(opts.detailFormatter.call(target, i, rows[i]));}table.push('</div>');table.push('</td>');table.push('</tr>');}table.push('</tbody></table>');$(container).html(table.join(''));},renderRow: function(target, fields, frozen, rowIndex, rowData){var opts = $.data(target, 'datagrid').options;var cc = [];if (frozen && opts.rownumbers){var rownumber = rowIndex + 1;if (opts.pagination){rownumber += (opts.pageNumber-1)*opts.pageSize;}cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">'+rownumber+'</div></td>');}for(var i=0; i<fields.length; i++){var field = fields[i];var col = $(target).datagrid('getColumnOption', field);if (col){var value = rowData[field]; // the field valuevar css = col.styler ? (col.styler(value, rowData, rowIndex)||'') : '';var classValue = '';var styleValue = '';if (typeof css == 'string'){styleValue = css;} else if (cc){classValue = css['class'] || '';styleValue = css['style'] || '';}var cls = classValue ? 'class="' + classValue + '"' : '';var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');cc.push('<td field="' + field + '" ' + cls + ' ' + style + '>');if (col.checkbox){style = '';} else if (col.expander){style = "text-align:center;height:16px;";} else {style = styleValue;if (col.align){style += ';text-align:' + col.align + ';'}if (!opts.nowrap){style += ';white-space:normal;height:auto;';} else if (opts.autoRowHeight){style += ';height:auto;';}}cc.push('<div style="' + style + '" ');if (col.checkbox){cc.push('class="datagrid-cell-check ');} else {cc.push('class="datagrid-cell ' + col.cellClass);}cc.push('">');if (col.checkbox){cc.push('<input type="checkbox" name="' + field + '" value="' + (value!=undefined ? value : '') + '">');} else if (col.expander) {//cc.push('<div style="text-align:center;width:16px;height:16px;">');cc.push('<span class="datagrid-row-expander datagrid-row-expand" style="display:inline-block;width:16px;height:16px;cursor:pointer;" />');//cc.push('</div>');} else if (col.formatter){cc.push(col.formatter(value, rowData, rowIndex));} else {cc.push(value);}cc.push('</div>');cc.push('</td>');}}return cc.join('');},insertRow: function(target, index, row){var opts = $.data(target, 'datagrid').options;var dc = $.data(target, 'datagrid').dc;var panel = $(target).datagrid('getPanel');var view1 = dc.view1;var view2 = dc.view2;var isAppend = false;var rowLength = $(target).datagrid('getRows').length;if (rowLength == 0){$(target).datagrid('loadData',{total:1,rows:[row]});return;}if (index == undefined || index == null || index >= rowLength) {index = rowLength;isAppend = true;this.canUpdateDetail = false;}$.fn.datagrid.defaults.view.insertRow.call(this, target, index, row);_insert(true);_insert(false);this.canUpdateDetail = true;function _insert(frozen){var tr = opts.finder.getTr(target, index, 'body', frozen?1:2);if (isAppend){var detail = tr.next();var newDetail = tr.next().clone();tr.insertAfter(detail);} else {var newDetail = tr.next().next().clone();}newDetail.insertAfter(tr);newDetail.hide();if (!frozen){newDetail.find('div.datagrid-row-detail').html(opts.detailFormatter.call(target, index, row));}}},deleteRow: function(target, index){var opts = $.data(target, 'datagrid').options;var dc = $.data(target, 'datagrid').dc;var tr = opts.finder.getTr(target, index);tr.next().remove();$.fn.datagrid.defaults.view.deleteRow.call(this, target, index);dc.body2.triggerHandler('scroll');},updateRow: function(target, rowIndex, row){var dc = $.data(target, 'datagrid').dc;var opts = $.data(target, 'datagrid').options;var cls = $(target).datagrid('getExpander', rowIndex).attr('class');$.fn.datagrid.defaults.view.updateRow.call(this, target, rowIndex, row);$(target).datagrid('getExpander', rowIndex).attr('class',cls);// update the detail contentif (opts.autoUpdateDetail && this.canUpdateDetail){var row = $(target).datagrid('getRows')[rowIndex];var detail = $(target).datagrid('getRowDetail', rowIndex);detail.html(opts.detailFormatter.call(target, rowIndex, row));}},bindEvents: function(target){var state = $.data(target, 'datagrid');if (state.ss.bindDetailEvents){return;}state.ss.bindDetailEvents = true;var dc = state.dc;var opts = state.options;var body = dc.body1.add(dc.body2);var clickHandler = ($.data(body[0],'events')||$._data(body[0],'events')).click[0].handler;body.unbind('click').bind('click', function(e){var tt = $(e.target);var tr = tt.closest('tr.datagrid-row');if (!tr.length){return}if (tt.hasClass('datagrid-row-expander')){var rowIndex = parseInt(tr.attr('datagrid-row-index'));if (tt.hasClass('datagrid-row-expand')){$(target).datagrid('expandRow', rowIndex);} else {$(target).datagrid('collapseRow', rowIndex);}$(target).datagrid('fixRowHeight');} else {clickHandler(e);}e.stopPropagation();});},onBeforeRender: function(target){var state = $.data(target, 'datagrid');var opts = state.options;var dc = state.dc;var t = $(target);var hasExpander = false;var fields = t.datagrid('getColumnFields',true).concat(t.datagrid('getColumnFields'));for(var i=0; i<fields.length; i++){var col = t.datagrid('getColumnOption', fields[i]);if (col.expander){hasExpander = true;break;}}if (!hasExpander){if (opts.frozenColumns && opts.frozenColumns.length){opts.frozenColumns[0].splice(0,0,{field:'_expander',expander:true,width:24,resizable:false,fixed:true});} else {opts.frozenColumns = [[{field:'_expander',expander:true,width:24,resizable:false,fixed:true}]];}var t = dc.view1.children('div.datagrid-header').find('table');var td = $('<td rowspan="'+opts.frozenColumns.length+'"><div class="datagrid-header-expander" style="width:24px;"></div></td>');if ($('tr',t).length == 0){td.wrap('<tr></tr>').parent().appendTo($('tbody',t));} else if (opts.rownumbers){td.insertAfter(t.find('td:has(div.datagrid-header-rownumber)'));} else {td.prependTo(t.find('tr:first'));}}// if (!state.bindDetailEvents){//  state.bindDetailEvents = true;//  var that = this;//  setTimeout(function(){//      that.bindEvents(target);//  },0);// }},onAfterRender: function(target){var that = this;var state = $.data(target, 'datagrid');var dc = state.dc;var opts = state.options;var panel = $(target).datagrid('getPanel');$.fn.datagrid.defaults.view.onAfterRender.call(this, target);if (!state.onResizeColumn){state.onResizeColumn = opts.onResizeColumn;opts.onResizeColumn = function(field, width){if (!opts.fitColumns){resizeDetails();}var rowCount = $(target).datagrid('getRows').length;for(var i=0; i<rowCount; i++){$(target).datagrid('fixDetailRowHeight', i);}// call the old event codestate.onResizeColumn.call(target, field, width);};}if (!state.onResize){state.onResize = opts.onResize;opts.onResize = function(width, height){if (opts.fitColumns){resizeDetails();}state.onResize.call(panel, width, height);};}// function resizeDetails(){//  var ht = dc.header2.find('table');//  var fr = ht.find('tr.datagrid-filter-row');//  fr.hide();//  var ww = ht.width()-1;//  var details = dc.body2.find('>table.datagrid-btable>tbody>tr>td>div.datagrid-row-detail:visible')._outerWidth(ww);//  details.find('.easyui-fluid').trigger('_resize');//  fr.show();// }function resizeDetails(){var details = dc.body2.find('>table.datagrid-btable>tbody>tr>td>div.datagrid-row-detail:visible');if (details.length){var ww = 0;dc.header2.find('.datagrid-header-check:visible,.datagrid-cell:visible').each(function(){ww += $(this).outerWidth(true) + 1;});if (ww != details.outerWidth(true)){details._outerWidth(ww);details.find('.easyui-fluid').trigger('_resize');}}}this.canUpdateDetail = true;    // define if to update the detail content when 'updateRow' method is called;var footer = dc.footer1.add(dc.footer2);footer.find('span.datagrid-row-expander').css('visibility', 'hidden');$(target).datagrid('resize');this.bindEvents(target);var detail = dc.body1.add(dc.body2).find('div.datagrid-row-detail');detail.unbind().bind('mouseover mouseout click dblclick contextmenu scroll', function(e){e.stopPropagation();});}
});$.extend($.fn.datagrid.methods, {fixDetailRowHeight: function(jq, index){return jq.each(function(){var opts = $.data(this, 'datagrid').options;if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){return;}var dc = $.data(this, 'datagrid').dc;var tr1 = opts.finder.getTr(this, index, 'body', 1).next();var tr2 = opts.finder.getTr(this, index, 'body', 2).next();// fix the detail row heightif (tr2.is(':visible')){tr1.css('height', '');tr2.css('height', '');var height = Math.max(tr1.height(), tr2.height());tr1.css('height', height);tr2.css('height', height);}dc.body2.triggerHandler('scroll');});},getExpander: function(jq, index){   // get row expander objectvar opts = $.data(jq[0], 'datagrid').options;return opts.finder.getTr(jq[0], index).find('span.datagrid-row-expander');},// get row detail containergetRowDetail: function(jq, index){var opts = $.data(jq[0], 'datagrid').options;var tr = opts.finder.getTr(jq[0], index, 'body', 2);// return tr.next().find('div.datagrid-row-detail');return tr.next().find('>td>div.datagrid-row-detail');},expandRow: function(jq, index){return jq.each(function(){var opts = $(this).datagrid('options');var dc = $.data(this, 'datagrid').dc;var expander = $(this).datagrid('getExpander', index);if (expander.hasClass('datagrid-row-expand')){expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');var tr1 = opts.finder.getTr(this, index, 'body', 1).next();var tr2 = opts.finder.getTr(this, index, 'body', 2).next();tr1.show();tr2.show();$(this).datagrid('fixDetailRowHeight', index);if (opts.onExpandRow){var row = $(this).datagrid('getRows')[index];opts.onExpandRow.call(this, index, row);}}});},collapseRow: function(jq, index){return jq.each(function(){var opts = $(this).datagrid('options');var dc = $.data(this, 'datagrid').dc;var expander = $(this).datagrid('getExpander', index);if (expander.hasClass('datagrid-row-collapse')){expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');var tr1 = opts.finder.getTr(this, index, 'body', 1).next();var tr2 = opts.finder.getTr(this, index, 'body', 2).next();tr1.hide();tr2.hide();dc.body2.triggerHandler('scroll');if (opts.onCollapseRow){var row = $(this).datagrid('getRows')[index];opts.onCollapseRow.call(this, index, row);}}});}
});$.extend($.fn.datagrid.methods, {subgrid: function(jq, conf){return jq.each(function(){createGrid(this, conf);function createGrid(target, conf, prow){var queryParams = $.extend({}, conf.options.queryParams||{});// queryParams[conf.options.foreignField] = prow ? prow[conf.options.foreignField] : undefined;if (prow){var fk = conf.options.foreignField;if ($.isFunction(fk)){$.extend(queryParams, fk.call(conf, prow));} else {queryParams[fk] = prow[fk];}}var plugin = conf.options.edatagrid ? 'edatagrid' : 'datagrid';$(target)[plugin]($.extend({}, conf.options, {subgrid: conf.subgrid,view: (conf.subgrid ? detailview : undefined),queryParams: queryParams,detailFormatter: function(index, row){return '<div><table class="datagrid-subgrid"></table></div>';},onExpandRow: function(index, row){var opts = $(this).datagrid('options');var rd = $(this).datagrid('getRowDetail', index);var dg = getSubGrid(rd);if (!dg.data('datagrid')){createGrid(dg[0], opts.subgrid, row);}rd.find('.easyui-fluid').trigger('_resize');setHeight(this, index);if (conf.options.onExpandRow){conf.options.onExpandRow.call(this, index, row);}},onCollapseRow: function(index, row){setHeight(this, index);if (conf.options.onCollapseRow){conf.options.onCollapseRow.call(this, index, row);}},onResize: function(){var dg = $(this).children('div.datagrid-view').children('table')setParentHeight(this);},onResizeColumn: function(field, width){setParentHeight(this);if (conf.options.onResizeColumn){conf.options.onResizeColumn.call(this, field, width);}},onLoadSuccess: function(data){setParentHeight(this);if (conf.options.onLoadSuccess){conf.options.onLoadSuccess.call(this, data);}}}));}function getSubGrid(rowDetail){var div = $(rowDetail).children('div');if (div.children('div.datagrid').length){return div.find('>div.datagrid>div.panel-body>div.datagrid-view>table.datagrid-subgrid');} else {return div.find('>table.datagrid-subgrid');}}function setParentHeight(target){var tr = $(target).closest('div.datagrid-row-detail').closest('tr').prev();if (tr.length){var index = parseInt(tr.attr('datagrid-row-index'));var dg = tr.closest('div.datagrid-view').children('table');setHeight(dg[0], index);}}function setHeight(target, index){$(target).datagrid('fixDetailRowHeight', index);$(target).datagrid('fixRowHeight', index);var tr = $(target).closest('div.datagrid-row-detail').closest('tr').prev();if (tr.length){var index = parseInt(tr.attr('datagrid-row-index'));var dg = tr.closest('div.datagrid-view').children('table');setHeight(dg[0], index);}}});},getSelfGrid: function(jq){var grid = jq.closest('.datagrid');if (grid.length){return grid.find('>.datagrid-wrap>.datagrid-view>.datagrid-f');} else {return null;}},getParentGrid: function(jq){var detail = jq.closest('div.datagrid-row-detail');if (detail.length){return detail.closest('.datagrid-view').children('.datagrid-f');} else {return null;}},getParentRowIndex: function(jq){var detail = jq.closest('div.datagrid-row-detail');if (detail.length){var tr = detail.closest('tr').prev();return parseInt(tr.attr('datagrid-row-index'));} else {return -1;}}
});

三、效果展示