新手学EasyUI（八）----SubGrid三级嵌套
最近做的项目中要实现一项功能，如下：
这里写图片描述
本来是想用tree来实现的，但是无奈时间紧张，能力有限，暂时没有方法来实现这样的树，于是就换了一种方式。在EasyUi中有一种表格可以满足上面的样式—–SubGrid表格
这里写图片描述
STEP1 创建主网格
<table id="subDatagrid" style="width: 100%; height: 90%;" data-options="" title="综合安防系统集成管理平台">
<thead>
<tr>
<th data-options="field:'id',checkbox:true,width:20"></th>
<th data-options="field:'right_name',width:935">子系统名称</th>
</tr>
</thead>
</table>STEP2 设置详细视图来显示子网格
为了使用详细视图，请记得在页面头部引用视图脚本文件。
<script src="../../../Scripts/datagrid-detailview.js"></script> //加载grid
$('#subDatagrid').datagrid({
url: "Right.ashx?action=get_parent_right",
fitColumns: false,
rownumbers: true,//行号
view: detailview,
detailFormatter: function (index, yeyerow) { //用以初始化并返回一个DIV容器
return '<div style="padding:2px"><table class="' + yeyerow.system_id + 'ddv"></table></div>';
},
onExpandRow: function (index, yeyerow) { //展开后触发事件
$('.' + yeyerow.system_id + 'ddv').datagrid({
url: 'Right.ashx?action=get_sec_son_right' + '&parent_right=' + yeyerow.right_id + '&system_id=' + yeyerow.system_id,
fitColumns: true,
rownumbers: true,
loadMsg: '加载中...',
height: 'auto',
columns: [[
{ field: 'id', width: 20, checkbox: 'true' },
{ field: 'right_name', title: '模块名称', width: 100 }
]],
onResize: function () { //事件会在窗口或框架被调整大小时发生
$.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
$('#subDatagrid').datagrid('fixRowHeight', i);
});
$('#subDatagrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () { //当数据载入成功时触发
clearTimeout(fatherinternalTimer);
fatherinternalTimer =
setInterval(function () {
$.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
$('#subDatagrid').datagrid('fixRowHeight', i);
});
$('#subDatagrid').datagrid('fixDetailRowHeight', index);
}, 10);
},
view: detailview,
detailFormatter: function (index_child, babarow) { //用以初始化并返回一个DIV容器
return '<div style="padding:0px"><table class="' + babarow.right_id + 'ddvv"></table></div>';
},
onExpandRow: function (index_child, babarow) { //展开后触发事件
$('.' + babarow.right_id + 'ddvv').datagrid({
url: 'Right.ashx?action=get_sec_son_right' + '&parent_right=' + babarow.right_id + '&system_id=' + babarow.system_id,
fitColumns: true,
rownumbers: true,
loadMsg: '加载中...',
height: 'auto',
columns: [[
{ field: 'id', checkbox: 'true', width: 20 },
{ field: 'right_name', title: '功能名称', width: 80 }
]],
onResize: function () { //事件会在窗口或框架被调整大小时发生
$.each($('.' + yeyerow.system_id + 'ddv').datagrid('getRows'), function (i, row) {
$('.' + yeyerow.system_id + 'ddv').datagrid('fixRowHeight', i);
});
$.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
$('#subDatagrid').datagrid('fixRowHeight', i);
$('#subDatagrid').datagrid('fixDetailRowHeight', i);
});
//父表格改变大小
$('.' + yeyerow.system_id + 'ddv').datagrid('fixDetailRowHeight', index_child);
//爷爷表格改变大小
$('#subDatagrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () { //当数据载入成功时触发
$.each($('.' + yeyerow.system_id + 'ddv').datagrid('getRows'), function (i, row) {
$('.' + yeyerow.system_id + 'ddv').datagrid('fixRowHeight', i);
});
$.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
$('#subDatagrid').datagrid('fixRowHeight', i);
});
$('.' + yeyerow.system_id + 'ddv').datagrid('fixDetailRowHeight', index_child);
$('#subDatagrid').datagrid('fixDetailRowHeight', index);
//延迟执行一次后，点击缩进的话不能恢复原形,所以不用延迟函数，而是使用间隔函数
clearTimeout(soninternalTimer);
soninternalTimer =
setInterval(function () {
$.each($('.' + yeyerow.system_id + 'ddv').datagrid('getRows'), function (i, row) {
$('.' + yeyerow.system_id + 'ddv').datagrid('fixRowHeight', i);
});
$.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
$('#subDatagrid').datagrid('fixRowHeight', i);
$('#subDatagrid').datagrid('fixDetailRowHeight', i);
});
$('.' + yeyerow.system_id + 'ddv').datagrid('fixDetailRowHeight', index_child);
$('#subDatagrid').datagrid('fixDetailRowHeight', index);
}, 5);
}
});
}
});
}
});当用户点击展开按钮（+）时，onExpandRow事件将被触发。 我们创建一个新的带有三列的子网格。 当子网格数据加载成功时或者改变尺寸大小时，请记得对主网格调用 fixDetailRowHeight 方法。
实现的最终效果图如下：
这里写图片描述
转载请注明出处：http://blog.csdn.net/zlts000/article/details/49895011
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年11月29日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读