使用jQuery EasyUI的 detailview创建分组表格

> 第一次使用markdown编辑，不太会编辑，布局有点乱。

先见效果图

下面说下使用方法

依赖的js以及css文件

引入了bootstrap，跟折叠表格功能无关的，只是因为项目中其他位置需要，该折叠表格是easyui的一个组件，跟bootstrap无关的

html文件内容

html中仅需一个table标签即可。


<div style="padding: 5px"><table class="easyui-datagrid" id="dg"></table>
</div>

js如何使用

注意url地址的table1.json和table2.json，渲染表格必须使用规定格式的json，下面我会给出detailview能接受的json的格式。本文例子使用js读取的本地的json文件，如果你使用ajax来加载的话，请在url地址那里改为请求地址即可，一定要保证返回的json格式与规定格式相同。

table.js文件内容


$(function () {$('#dg').datagrid({view: detailview,width:'auto',url:'table1.json',//使用ajax加载的话修改这个url地址height:'auto',fitColumns:true,//会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动rownumbers: true,//行号columns: [[{field: 'id1',  checkbox: 'true'},{field: 'id', title: '入库单号', styler: cellStyler},{field: 'zhuangtai', title: '当前状态', styler: cellStyler},{field: 'name', title: '供货单位', styler: cellStyler},{field: 'time', title: '入库时间', styler: cellStyler},{field: 'type', title: '入库方式', styler: cellStyler},{field: 'zdlb', title: '账单类别', styler: cellStyler},{field: 'num', title: '发票数量（张）', styler: cellStyler},{field: 'leibie', title: '药品种类（种）',  styler: cellStyler},{field: 'shizhi', title: '实支金额合计', styler: cellStyler},{field: 'pifa', title: '批发金额合计', styler: cellStyler},{field: 'lingshou', title: '零售金额合计',  styler: cellStyler}]],onBeforeLoad: function (index, row) {/*  console.log('loading');*/},detailFormatter: function (index, row) {// console.log('detailFormatter--index:'+index+'--'+'row:'+row);return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';},onExpandRow: function (index, row) {//当展开一行时触发。//console.log('onExpandRow---index:'+index+'--'+'row:'+row)$('#ddv-' + index).datagrid({fitColumns:true,//会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动rownumbers: true,url:'table2.json',//使用ajax加载的话修改这个url地址loadMsg: '加载中...',height: 'auto',columns: [[{field: 'id', checkbox: 'true'},{field: 'code', title: '发票号'},{field: 'name', title: '名称'},{field: 'size', title: '规格'},{field: 'num1', title: '实物数量'},{field: 'num2', title: '发票数量'},{field: 'koulv', title: '扣率'},{field: 'leixing', title: '类型'},{field: 'zhuangtai', title: '状态'},{field: 'shizhi', title: '实支金额'},{field: 'pifa', title: '批发金额'},{field: 'lingshou', title: '零售金额'},]],onResize: function () {$('#dg').datagrid('fixDetailRowHeight', index);$('#dg').datagrid('fixRowHeight', index);},onLoadSuccess: function () {setTimeout(function () {$('#dg').datagrid('fixDetailRowHeight', index);$('#dg').datagrid('fixRowHeight', index);}, 0);}});$('#dg').datagrid('fixDetailRowHeight', index);$('#dg').datagrid('fixRowHeight', index);}});});/*修改单元格背景色*/
function cellStyler(value, row, index) {return 'color:blue;';
}

table1.json文件内容

{"total":28,"rows":[{"id1": "00001","id": "00001","zhuangtai": "已验收","name": "上海华仁医药有限公司","time": "2017-01-12","type": "方式1","zdlb": "类别1","num": "1","leibie": "1","shizhi": "-170","pifa": "-170","lingshou": "-187"},{"id1": "00002","id": "00002","zhuangtai": "已验收","name": "上海华仁医药有限公司","time": "2017-02-12","type": "方式1","zdlb": "类别1","num": "1","leibie": "1","shizhi": "120","pifa": "130","lingshou": "187"},{"id1": "00003","id": "00003","zhuangtai": "已验收","name": "国药控股股份有限公司","time": "2017-03-12","type": "方式1","zdlb": "类别2","num": "2","leibie": "2","shizhi": "2807","pifa": "2857","lingshou": "3142.7"},{"id1": "00004","id": "00004","zhuangtai": "未验收","name": "葵花医药有限公司","time": "2017-04-12","type": "方式1","zdlb": "类别3","num": "1","leibie": "2","shizhi": "160","pifa": "130","lingshou": "179"},{"id1": "00005","id": "00005","zhuangtai": "未验收","name": "湖南医药有限公司","time": "2017-05-12","type": "方式2","zdlb": "类别4","num": "1","leibie": "3","shizhi": "140","pifa": "140","lingshou": "180"},{"id1": "00006","id": "00006","zhuangtai": "未验收","name": "国药控股股份有限公司","time": "2017-06-12","type": "方式3","zdlb": "类别4","num": "2","leibie": "3","shizhi": "287","pifa": "287","lingshou": "312.7"},{"id1": "00007","id": "00007","zhuangtai": "已验收","name": "国药控股股份有限公司","time": "2017-07-12","type": "方式4","zdlb": "类别3","num": "2","leibie": "3","shizhi": "587","pifa": "387","lingshou": "812.7"},{"id1": "00008","id": "00008","zhuangtai": "未验收","name": "湖南医药有限公司","time": "2017-08-12","type": "方式5","zdlb": "类别4","num": "1","leibie": "2","shizhi": "27","pifa": "87","lingshou": "32.7"},{"id1": "00009","id": "00009","zhuangtai": "已验收","name": "湖南医药有限公司","time": "2017-09-12","type": "方式5","zdlb": "类别5","num": "2","leibie": "1","shizhi": "17","pifa": "17","lingshou": "12.7"},{"id1": "00010","id": "000010","zhuangtai": "已验收","name": "湖南医药有限公司","time": "2017-10-12","type": "方式1","zdlb": "类别2","num": "2","leibie": "1","shizhi": "147","pifa": "127","lingshou": "172.7"}
,{"id1": "00011","id": "000011","zhuangtai": "已验收","name": "湖南医药有限公司","time": "2017-11-12","type": "方式1","zdlb": "类别3","num": "1","leibie": "2","shizhi": "167","pifa": "427","lingshou": "272.7"}
]}

table2.json文件内容

{"total": 28,"rows": [{"id": "00001","code": "123125","name": "复方氯己定含漱液","size": "300ml*1瓶/瓶","num1": "-10","num2": "-10","koulv": "100","leixing": "退药","zhuangtai": "保存","shizhi": "-170","pifa": "-170","lingshou": "-178"},{"id": "00002","code": "123126","name": "氨碘肽滴眼液","size": "5ml*2支/盒","num1": "10","num2": "-10","koulv": "100","leixing": "退药","zhuangtai": "保存","shizhi": "-170","pifa": "-170","lingshou": "-178"},{"id": "00003","code": "123127","name": "阿昔洛韦滴眼液","size": "8ml*2支/支","num1": "-10","num2": "-10","koulv": "100","leixing": "退药","zhuangtai": "保存","shizhi": "-170","pifa": "-170","lingshou": "-178"},{"id": "00004","code": "123128","name": "布林佐胺滴眼液","size": "300ml*1瓶/瓶","num1": "-10","num2": "-10","koulv": "100","leixing": "退药","zhuangtai": "保存","shizhi": "-170","pifa": "-170","lingshou": "-178"}]
}

datagrid-detailview.js
该js是easyui的一个扩展插件，网上可以找到，这里也给出文件内容

$.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;}}
});

css/image文件夹的两个图片，可以在easyui的包中找到，去官网下载easyui解压后可以找到

datagrid_icons.png

loading.gif

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用jQuery EasyUI的 detailview创建分组表格相关推荐

雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 创建页脚摘要
jQuery EasyUI 数据网格 - 创建页脚摘要在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...
雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
EasyUI DataGrid DetailView（数据表格详细展示带子表格）
Mark一下EASY UI 的数据表格详细展示使用记录. 第一步:创建页面布局这一步主要是引用Easy UI的JS,除了easyui.min.js还有datagrid-detailview.js & ...
【EasyUI DataGrid DetailView】表格嵌套子表格
一.功能描述在做项目的时候,要求能够对某一行的数据进行折叠显示,用来查看该行的详细信息.拟通过采用easyui的detailview创建表格分组,大致的效果图如下所示: 二.使用方法本篇博客承接以 ...
jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
jQuery EasyUI 数据网格
jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格本节将介绍jQuery EasyUI数据网格的运用,主要内容为如何将HTML表格转换为数据网格. 本实例演示如何转换表格(ta ...
easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...

使用jQuery EasyUI的 detailview创建分组表格

使用jQuery EasyUI的 detailview创建分组表格

> 第一次使用markdown编辑，不太会编辑，布局有点乱。

先见效果图

下面说下使用方法

依赖的js以及css文件

引入了bootstrap，跟折叠表格功能无关的，只是因为项目中其他位置需要，该折叠表格是easyui的一个组件，跟bootstrap无关的

html文件内容

js如何使用

使用jQuery EasyUI的 detailview创建分组表格相关推荐

最新文章

热门文章