easyui datagrid datailview使用子表格后数据不对齐解决办法
easyui datagrid datailview,当dataview加载的是datagrid对象,子datagrid使用ajax异步加载数据时,前面的展开符号列高度没有变化,导致内容和前面的内容无法对齐,如下图所示
而实际效果应该如下图
解决办法:增加onLoadSuccess事件重设前面展开部分的高度,因为展开部分和内容是分开的。
var columns = [[{ field: 'TestPoint_ID', title: '测试点编号', width: 25, hidden: 'true' }, { field: 'Req_State', title: '状态', width: 25 }, { field: 'TestPoint_Name', title: '测试点名称', width: 25 }, { field: 'TestPoint_Des', title: '测试点描述', width: 100 }, { field: 'TestScript', title: '测试脚本', width: 70}]]; $('#testCaseMaGrid').datagrid({ method: 'get', rownumbers: true, fitColumns: true, fit: true, url: 'data.txt', frozenColumns: [[{ field: 'ck', checkbox: true}]], columns: columns, title:'easyui datagrid datailview使用子表格后数据不对齐', view: detailview, detailFormatter: function (index, row) { return '<div id="subDg' + index + '"><tr></div>'; }, onExpandRow: function (index, row) { var o = $('#subDg' + index); if (!o.data('init')) {//未初始化过 o.datagrid({ url: 'data.txt', onLoadSuccess: function () { setTimeout(function () { var tr = o.closest('tr'), //获取子表格所在行 id = tr.prev().attr('id'); //此子表格父行所在行的id id = id.replace(/-2-(\d+)$/, '-1-$1'); //detailview没有展开的前部分的id是有规则的 //通过下面的这2个示例你应该不难看出改变的是什么 //datagrid-row-r1-1-0 //datagrid-row-r1-2-0 $('#' + id).next().css('height', tr.height());//设置没展开的前部分的高度,由于启用了计时器,会闪一下 }, 1); //延时触发设置高度事件,因为这个事件只是数据加载完毕,并没有生成DOM对象,不延时触发设置不了 }, fitColumns: true, frozenColumns: [[{ field: 'id', checkbox: true}]], columns: columns }); o.data('init', true); } } });
加支付宝好友偷能量挖...
原创文章,转载请注明出处:easyui datagrid datailview使用子表格后数据不对齐解决办法