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

简介: <div class="markdown_views"><p>最近做的项目中要实现一项功能,如下:</p><p><img src="http://img.blog.csdn.net/20151117230317275" alt="这里写图片描述" title=""></p><p>本来是想用tree来实现的,但是无奈时间紧张,能力有限,暂时没有方法来实现这样的树,于是就

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

这里写图片描述

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

相关文章
|
JSON 前端开发 JavaScript
成功解决:[object Object]
这篇文章讨论了在JavaScript中打印对象时出现的"[object Object]"问题的原因,并提供了使用`JSON.stringify()`方法将对象转换为字符串以便于打印和调试的解决方案。
成功解决:[object Object]
|
前端开发 JavaScript
前端框架的选型、分类、常用框架整理(含官网链接)
前端框架的选型、分类、常用框架整理(含官网链接)
635 7
|
网络安全 开发工具 git
使用Idea提交项目到远程仓库
本文介绍了如何在Idea中创建Git本地仓库、提交更改,并推送代码到Gitee远程仓库的步骤,包括创建本地仓库、提交更改、复制远程仓库地址、配置远程仓库以及推送代码到远程仓库的过程。
使用Idea提交项目到远程仓库
|
负载均衡 监控 Java
Eureka介绍与使用
Eureka介绍与使用
|
Java Maven
修改配置maven镜像仓库位置,将maven镜像更换成阿里镜像
修改配置maven镜像仓库位置,将maven镜像更换成阿里镜像
11453 1
|
数据可视化 开发工具 Python
PyCharm与Anaconda超详细安装配置教程
PyCharm与Anaconda超详细安装配置教程
9039 0
|
前端开发 JavaScript
VUE+ElementUI更改导航菜单选中背景颜色
VUE+ElementUI更改导航菜单选中背景颜色
20061 0
|
12天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1267 5
|
1天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
11天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1283 87