easyui datagrid datailview使用子表格后数据不对齐解决办法

  easyui datagrid datailview,当dataview加载的是datagrid对象,子datagrid使用ajax异步加载数据时,前面的展开符号列高度没有变化,导致内容和前面的内容无法对齐,如下图所示

easyui datagrid datailview使用子表格后数据不对齐解决办法

  而实际效果应该如下图

easyui datagrid datailview使用子表格后数据不对齐解决办法

解决办法:增加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使用子表格后数据不对齐解决办法

评论(0)Web开发网
阅读(2386)喜欢(0)easyui开发技巧