新手学EasyUI(八)----SubGrid三级嵌套

原创 2015年11月29日 20:22:01

最近做的项目中要实现一项功能,如下:

这里写图片描述

本来是想用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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

解决easyui 控件datagrid 二次加载问题

使用url方式的初学者,经常碰到重复请求的问题,这个问题的根源是因为一旦设置了url参数,Datagrid组件在实例化的时候就会做请求,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防止二...

限制文本框输入YYYY-MM-DD格式的日期

文本输入框有时对输入的文本有限制,如限制输入YYYY-MM-DD格式的日期,可以通过正则表达式实现function IsDate(str){ var reg=/^(\d{4})-(\d{2})...

easyUI SubGrid 学习

目的:今天在玩SubGrid 子数据表格时,遇到一些问题,在这里记录一下。 过程:去easyUI官网,下载datagrid-detailview.js文件,然后导入到要玩的html中,当然常规的e...

Easyui DataGrid自定义视图和subGrid

使用DataGrid的自定义视图,可以扩展一行显示更多的细节 下文定义的divview其实是使用了datagrid的view配置,重写了其默认的renderRow方法。 基于这种实现,我们可以显示更多...
  • ld_____
  • ld_____
  • 2015年08月14日 11:05
  • 3501

EasyUI使用心得——datagrid的查询功能和SubGrid冲突导致分页无效问题

在项目中使用easyui的datagrid也是有段时间了,easyui很方便确实,但是还是有些小问题,至少在我使用的过程中,发现的这些问题。 在datagrid使用SubGrid后,我在后面添加过滤功...

新手学EasyUI(七)----DataGrid CheckBox 动态选中

先上一张图:下面说一下具体实现的功能是什么样的。页面首次加载的时候,右面的表格中的CheckBox都处于未选中的状态,现在是这么设计的,时段只有这么8条数据在一张单独的表里面。用户和时段的关系放在另一...

新手学EasyUi+JS----ComboBox 级联

最近在做一个EasyUi ComboBox的级别联动的效果,相关的内容如下: EasyUI刚接触,JS之前学过,不过在怎么用这方面自己还是个新手,不过现在还在不断的学习,实践出真知,这是...

使用ExtJS5 GridPanel实现表格嵌套SubGrid(基于ExtJS MVC模式)

使用ExtJS-5.10 的 GridPanel组件实现表格嵌套,主要依赖于GridPanel自带的RowExpander插件,具体用法以及配置参数请参照API 这里有一个简单的表格嵌套Demo和大家...

jqGrid与Struts2的结合应用(八) —— 奇妙的subGrid子表格

jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单。使用的方式有两种: 使用普通的subGrid子表格;使用一个完整jqGrid作为子表格; 显然第二种方式更加通用,功能更加强大,因...
  • z_p_h
  • z_p_h
  • 2012年04月15日 15:10
  • 1245

easyUI的combox三级联动

这几天在做项目中又用到了easyUI,以前做ITOO的时候前端都是被封装好的,而且也没有真正接触过三级联动效果。这个三级联动是要实现的是省市县联动。选择某一个省时跟着相应的市显示,接着相应的县显示。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:新手学EasyUI(八)----SubGrid三级嵌套
举报原因:
原因补充:

(最多只允许输入30个字)