easyUI SubGrid 学习

最新推荐文章于 2024-04-14 22:47:00 发布

BigLazyBone

最新推荐文章于 2024-04-14 22:47:00 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： easyUI学习文章标签： SubGrid 隐藏+ 一闪而过未解决

本文链接：https://blog.youkuaiyun.com/BigLazyBone/article/details/51861964

本文记录了在使用easyUI SubGrid时遇到的问题及解决方案，特别是针对子数据表格无数据时出现的闪烁现象。通过在onExpandRow事件中使用ajax预加载数据，并根据数据状态决定是否显示子表，从而避免了子表加载的闪烁问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：今天在玩SubGrid 子数据表格时，遇到一些问题，在这里记录一下。

过程：去easyUI官网，下载datagrid-detailview.js文件，然后导入到要玩的html中，当然常规的easyUI css和js都要导入。

跟着官网的demo,直接拷备代码。下面截取了自己的一段代码，下面的表格使用到了行编辑，所以还有导入行编辑的js文件，在上一个学习记录有笔记。

/**##################################开始##################################*/

$ (function () {

   $ ('#sysSubUser').datagrid ({
        iconCls : 'icon-save',
        nowrap : false, // 设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
        striped : true, // 设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
        fit : true,
        fitColumns : true,// 设置为true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
        // url : $.pageRoot + '/sys/test_SysSubUser_listJSON.action',
        url : $.pageRoot + '/js/test/datagrid_data.json',
        idField : 'userId', // 指示哪个字段是标识字段。
        pagination : true, // 设置为true，则在数据网格（datagrid）底部显示分页工具栏。
        rownumbers : true, // 设置为 true，则显示带有行号的列。
        pageNumber : 1, // 当设置了 pagination 属性时，初始化页码。
        frozenColumns : [
            [
                    {
                        field : 'userId'
                    }, {
                        title : '账号',
                        field : 'userAccount',
                        width : 80,
                        align : 'center'
                    }
            ]
        ],
        columns : [
            [
                    {
                        field : 'userName',
                        title : '名称',
                        width : 100,
                        align : 'center',
                    }, {
                        field : 'sex',
                        title : '性别',
                        width : 100,
                        align : 'center',
                        formatter : function (value, row, index) {
                            return value == 1 ? "男" : "女";
                        }
                    }, {
                  &n