jqGrid的树形表格：treeGrid

最新推荐文章于 2020-11-27 18:37:59 发布
最新推荐文章于 2020-11-27 18:37:59 发布
阅读量1.2k 收藏
点赞数
分类专栏： jQuery插件收集 文章标签： json java php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pyzheng/article/details/84465256
版权
jqGrid实现树状Grid [url]http://blog.csdn.net/axzywan/article/details/7384036[/url]
JQgrid tree 终于有数据了 [url]http://www.cnblogs.com/Mr-Joe/archive/2012/03/20/2407958.html[/url]
官方文档: [url]http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid[/url]

[color=red][b]问题和注意[/b][/color]：
1. 如果grid的参数存在"rownumbers": true, "rownumWidth": 20,那么无法在正确的位置显示ExpandColumn信息，他会显示在ExpandColumn的前一列。所以应该动态计算并放到下一列。可能会引起setTreeRow方法的错误，因为这个方法是使用真实的ExpandColumn。
2. jsonReader: {
root: "dataRows", //[color=darkblue]设定这个参数，有时候也无法正常现实[/color]
repeatitems : false //[color=darkblue]不需要再去后台刷新，否则可能有问题，所以最好第一次就加载所有数据[/color]
}
3. gridview， boolean 设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件
4. 如果getNodeParent方法无效，可能是因为你给的recorddata.parentId的类型不对，这里需要recorddata.parentId是字符串，才能找到的.
5. collapseNode和collapseRow，expandNode和expandRow一般是成对调用。
6. 移动一个节点以及它的子节点。要字节加方法，才能实现,其实它至此的treegrid功能很弱，一些东西要自己实现，后面附加一些自己实现的方法


第一个列子
/pages/demo/tree.json
---------------------------------- 
{
    "total":11,
    "page":1,
    "records":11,
    "rows":[
        {"id":1, "name":"Pandy1", "cell":["第一级1",0,null,false,false]},
        {"id":3, "name":"Pandy2", "cell":["第二级1",1,1,true,false]},
        {"id":2, "name":"Pandy3", "cell":["第一级2",0,null,true,false]}
    ]
}


<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Insert title here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#treegrid").jqGrid({
                treeGrid: true,
                treeGridModel: 'adjacency',
                ExpandColumn: 'name',
                ExpandColClick: true,
                url: '/pages/demo/tree.json',
                datatype: 'json',
                colNames: ["管理选项"],
                colModel: [
                    { name: 'name', index: 'name' }
                ],
                pager: "false",
                height: 'auto',
                width: '210',
                viewrecords: true,
                //   caption: 'none',
                jsonReader: {
                    root: "rows",
                    total: "total",
                    repeatitems: true
                }

            });
        })
        ;
    </script>

</head>
<body>
<table id="treegrid"></table>
<div id="ptreegrid"></div>
</body>
</html>



第二个例子 
[
    {"id":0,"username":"王三1","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123"},
    {"id":1,"username":"王三2","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123"},
    {"id":2,"username":"王三3","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123"}
]


<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Insert title here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            jQuery("#treegrid").jqGrid({
                treeGrid: true,
                treeGridModel: 'adjacency', //treeGrid模式，跟json元数据有关 ,adjacency/nested
                ExpandColumn : 'username',
                scroll: "true",
                url: '/pages/demo/tree1.json',
                datatype: 'json',
                colNames:['编号','姓名','密码','年龄','地址','出生日期'],
                colModel:[
                    {name:'id',index:'id', width:90,sorttype:"int"},
                    {name:'username',index:'username', width:110,sorttype:"int"},
                    {name:'password',index:'password', width:80},
                    {name:'age',index:'age', width:80},
                    {name:'address',index:'address', width:80},
                    {name:'time',index:'time', width:80,sorttype:"date"}
                ],
                pager: "false",
                sortname: 'id',
                sortorder: "desc",

                jsonReader: {
                    root: "dataRows",
                    repeatitems : false
                },
                treeReader : {
                    level_field: "level",
                    parent_id_field: "parent",
                    leaf_field: "isLeaf",
                    expanded_field: "expanded"
                },
                caption: "jqGrid test",
                mtype: "POST",
                height: "auto",    // 设为具体数值则会根据实际记录数出现垂直滚动条
                rowNum : "-1",     // 显示全部记录
                shrinkToFit:false  // 控制水平滚动条
            });
        });
    </script>

</head>
<body>
<table id="treegrid"></table>
</body>
</html>



[color=blue][b]一些自己实现的方法[/b][/color] 
/* 以下是常用的方法 */
        /**
         * 设定默认关闭的等级，同时自动关闭它的下一级
         * 这里递归，出现错误
         * @param GridConfig
         * @param level
         */
        /* --------------------------- tree grid for jqGrid ------------------------------- */
        setDefaultOpenLevel: function (GridConfig, level) {
            var childRows = $("#" + GridConfig.divId).jqGrid('getRootNodes');
            for (var i = 0; i < childRows.length; i++) {
                var rows = $("#" + GridConfig.divId).jqGrid('getNodeChildren', childRows[0]);
                for (var m = 0; m < rows.length; m++) {
                    if (rows[m].level <= level) {
                        $("#" + GridConfig.divId).jqGrid('collapseNode', rows[m]);
                        $("#" + GridConfig.divId).jqGrid('collapseRow', rows[m]);
                    }

                    //遍历导致浏览器崩溃，所以多做一次循环，进入深一层继续关闭就好.
                    var trows = $("#" + GridConfig.divId).jqGrid('getNodeChildren', rows[m]);
                    for (var k = 0; k < trows.length; k++) {
                        if (trows[k].level <= (level + 1)) {
                            $("#" + GridConfig.divId).jqGrid('collapseNode', trows[k]);
                            $("#" + GridConfig.divId).jqGrid('collapseRow', trows[k]);
                        }
                    }
                }
            }
        },
        /**
         * 展开某个节点的所有父节点
         * @param GridConfig
         * @param id
         */
        openParentsNode: function (GridConfig, rowid) {
            var currNode = $.GridUtils.getCurrentNode(GridConfig, rowid);
            currNode.parentId=""+currNode.parentId;
            var parent = $("#" + GridConfig.divId).jqGrid('getNodeParent', currNode);
            if (parent != null) {
                $("#" + GridConfig.divId).jqGrid('expandNode', parent);
                $("#" + GridConfig.divId).jqGrid('expandRow', parent);
                $.GridUtils.openParentsNode(GridConfig, parent.id);
            }
        },
        getAllChildrenNodes: function (GridConfig, root, level, treeList) {
            if (typeof treeList == "undefined") {
                treeList = [];
            }
            var chs = $("#" + GridConfig.divId).jqGrid('getNodeChildren', root);
            treeList[treeList.length] = root;

            if (chs != null && chs.length > 0) {
                for (var i = 0; i < chs.length; i++) {
                    $.GridUtils.getAllChildrenNodes(GridConfig, chs[i], level + 1, treeList);
                }
            }
            return treeList;
        },
        /**
         * 自己实现获得父节点方法
         * @param GridConfig
         * @param rowid
         * @returns {*}
         */
        getNodeParent: function (GridConfig, rowid) {
            var roots = $("#" + GridConfig.divId).jqGrid('getRootNodes');
            var row = $.GridUtils.getRowData(GridConfig, rowid);

            for (var i = 0; i < roots.length; i++) {
                var treeList = $.GridUtils.getAllChildrenNodes(GridConfig, roots[i], 0);
                for (j = 0; j < treeList.length; j++) {
                    if (treeList[j].id == row.parentId) {
                        return  treeList[j]
                    }
                }
            }

            return null;
        },
        /**
         * 自己实现获得当前节点方法
         * @param GridConfig
         * @param rowid
         * @returns {*}
         */
        getCurrentNode: function (GridConfig, rowid) {
            var roots = $("#" + GridConfig.divId).jqGrid('getRootNodes');
            var row = $.GridUtils.getRowData(GridConfig, rowid);

            for (var i = 0; i < roots.length; i++) {
                var treeList = $.GridUtils.getAllChildrenNodes(GridConfig, roots[i], 0);
                for (j = 0; j < treeList.length; j++) {
                    if (treeList[j].id == row.id) {
                        return  treeList[j]
                    }
                }
            }

            return null;
        },
        /**
         * 第一个节点是当前节点，第二个以及后面的，属于它的子节点
         * @param GridConfig
         * @param rowid
         * @returns {*}
         */
        getAllChildrenNodesByRowId: function (GridConfig, rowid) {
            var row = $.GridUtils.getRowData(GridConfig, rowid);
            row._id_ = row.id;
            var rowList = $.GridUtils.getAllChildrenNodes(GridConfig, row, row.level);
            if (rowList == null || rowList.length == 0)
                return rowList;

            if (rowList != null && rowList.length > 0) {
                //替换当前节点
                rowList[0] = $.GridUtils.getCurrentNode(GridConfig, rowid);
            }
            return rowList;

        },
        /**
         * 自己实现的删除节点以及子节点,注意，先从叶子删除
         * @param GridConfig
         * @param rowid
         */
        deleteTreeNodeAndChildren: function (GridConfig, rowid) {
            var treeList = $.GridUtils.getAllChildrenNodesByRowId(GridConfig, rowid);
            //先删除子节点再删除当前节点
            for (var i = treeList.length - 1; i >= 0; i--) {
                if (treeList[i] != null)
                    $("#" + GridConfig.divId).jqGrid('delTreeNode', treeList[i].id);
            }
        },
        /**
         * 移动一个节点到另一个节点
         * @param GridConfig
         * @param newNodeData
         */
        moveTreeNode: function (GridConfig, newNodeData) {
            if (typeof(newNodeData.parentId) == "undefined") {
                alert("没有设定父节点ID");
                return;
            }
            var levelPad = 0;  //用于校对心节点的level
            var rowid = typeof(newNodeData.rowid) == "undefined" ? newNodeData.id : newNodeData.rowid;
            var newParentId = newNodeData.parentId;
            var newParent;
            var oldParent;
            //获得之前的当前节点以及所有子节点
            var treeList = $.GridUtils.getAllChildrenNodesByRowId(GridConfig, rowid);
            //alert("treeList=" + $.toJSON(treeList));
            if (treeList != null && treeList.length > 0) {
                newParent = $.GridUtils.getCurrentNode(GridConfig, newParentId);
                oldParent = $.GridUtils.getCurrentNode(GridConfig, treeList[0].parentId);
                //新旧的父节点的level差量
                if (newParent != null) {
                    //levelPad = newParent.level - treeList[0].level;
                    levelPad = newParent.level - oldParent.level;
                }
                //alert("newParent="+ $.toJSON(newParent));
                //alert("oldParent="+ $.toJSON(oldParent));
                //alert("levelPad="+ levelPad);
            }

            //删除当前节点以及所有子节点
            $.GridUtils.deleteTreeNodeAndChildren(GridConfig, rowid);
            //alert("deleteTreeNodeAndChildren");

            //更新当前节点的业务信息
            treeList[0] = $.extend(treeList[0], newNodeData);

            for (var i = 0; i < treeList.length; i++) {
                treeList[i]._id_ = treeList[i].id;
                treeList[i].loaded = true;
                //新旧的父节点的level差量 + 1,就是当前节点应该的level
                treeList[i].level = treeList[i].level + levelPad;
                //alert("treeList[i]=" + $.toJSON(treeList[i]));
                $("#" + GridConfig.divId).jqGrid('addChildNode', treeList[i].id, treeList[i].parentId, treeList[i]);
            }
            $.GridUtils.openParentsNode(GridConfig, treeList[0].id);

            //return;

            //旧的父节点不存在子节点的时候，无法隐藏图标，另求其他方法
            //重新检查旧的父节点，当旧的父节点已经不存在子节点的时候，应该重新读取，删除，再加入，保证图标隐藏。
            treeList = $.GridUtils.getAllChildrenNodesByRowId(GridConfig, oldParent.id);
            if (treeList != null && treeList.length == 1) {
                $.GridUtils.deleteTreeNodeAndChildren(GridConfig, treeList[0].id);
                treeList[0]._id_ = oldParent.id;
                treeList[0].loaded = true;
                treeList[0].isLeaf = true;
                //alert("treeList[0]=" + $.toJSON(treeList[0]));
                $("#" + GridConfig.divId).jqGrid('addChildNode', treeList[0].id, treeList[0].parentId, treeList[0]);
            }

        }
不净之心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI Jquery 学习笔记 ——DataGrid（数据网格）与 Tree（树）详细版
cccloveforever的博客
04-13 1761
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
jqgrid treegrid树状表格 和 折叠表格的前端案例
weixin_30617737的博客
05-25 919
treegird 表格 function gridList() { function gridList() {$.jgrid.defaults.styleUI = "Bootstrap";var $gridList = $("#gridList"); $gridList.jqGrid({ treeGrid: true,//启用树型Grid功能shrinkToFit: true...
基于jqgrid实现树形菜单分页列表查询
01-14
基于jqgrid实现类似父子级树形菜单分页列表查询，让table页的行元素可以实现像ztree那样的上下级关系
基于JQuery的自定义树形菜单表格，实现展开、收起效果
不负好时光
11-27 2267
最近的项目不允许使用框架，遇到自定义树形表格的页面功能，百度找到“基于JQuery TreeTable实现的属性表单”，结果进去一看，都是一毛一样的，没有实现方式的代码，深深怀疑是不是就抄个代码根本没有自己测试过。 仔细一想，其实实现并不困了，不一定非要找现成的。于是简单思考了一下，做出结果如下，如有bug欢迎指正。 思路 我想的很简单， 一个箭头显示打开、收起的样式； 在箭头上加入toggle()方法控制一级菜单下的所有子菜单的样式，通过display样式控制子菜单隐藏/显示，从而实现树型菜单打开、收
JqGrid中的TreeGrid的Adjacency Model无法正常显示及默认收起的问题
chinvzhao8168的博客
07-11 392
相对于zTree，Jqgrid的树形表格要求更苛刻：要有level、要顺序排列（即展开后所有节点后的顺序） 题目中一个无法正常显示的问题就是数据没有按照展开后的顺序排列，jqgrid无法自己按照属性结构排序 另一个无法默认收起的问题，是因为树形结构的id及parentid只有使用string类...
jqGrid JS之TreeGrid (树形表格)- yellowcong
08-02 2万+
JqGrid的版本是jqGrid JS - v5.1.0，然后根据中文的API，咋整都没有弄出来，当时真是心累啊，主要注意的有id隐藏列定义、Grid数据定义（注意parent、id的数据类型以及Grid数据格式），Grid的数据设定
创建jQgrid树形表格
linziping的博客
05-31 3764
创建 jQgrid树形表格 官网地址：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:oftreegrid 案例地址：https://blog.mn886.net/jqGrid/ 1、编写html页面引入相应插件文件 jQgrid基于jQuery库，首先要引入jQuery.js；表格样式使用了boostrap，引入了boostrap.min.c...
bootstrap-table+treegrid实现树形表格
12-10
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 1、引入 jquery.js、bootstrap-table.js、...
基于vuejs实现树形表格的封装vuetreetable
08-10
在处理复杂的数据展示时，树形表格是一种常见的需求，它能够以层次结构来展示数据，使得数据的组织更为清晰。本教程将详细介绍如何基于Vue.js实现一个自定义的树形表格组件——vue-tree-table。 首先，我们需要了解...
jqgrid treegrid功能的bug修改
05-10
可先参考下我的博客：http://blog.csdn.net/qq805911956/article/details/51262506
jqGrid5.3.1(grid，treegrid) 2018官方最新版本
08-24
- **TreeGrid（树形网格）**：jqGrid的5.3.1版本包含了TreeGrid功能，允许以树状结构展示数据，这对于层级关系复杂的数据尤为适用，用户可以展开或折叠节点，查看层次关系。 - **编辑功能**：提供了行内编辑、弹出...
jqGrid 树形列表
println小强的博客
06-09 6020
js代码$(function(){ $("#jq-grid").jqGrid({ treeGrid: true, treeGridModel: 'adjacency', // treeGrid模式，跟json元数据有关 ExpandColumn : 'menuName', // 一般设置第一行 Expand
JqGrid treegrid 树形表格示例
热门推荐
zhangfeng2124的专栏
03-07 3万+
treegrid树形表格，动态加载 1、HTML代码 2、JS代码 jQuery("#one_grid").jqGrid({ url:'/test.action', datatype: "json", width:300, treeGrid: true, treeGridModel: 'adj
jqGrid 树形表格多选
zrk1000的专栏
07-15 9455
使用了jqGrid的treeGrid做数据展示，使用中有对树形的数据多选的需求，需要选择一个节点，同时选择其所有子节点；查看了API，发现treeGrid不支持，还是自己动手来完成
jqGrid实现树状Grid
圣彼得堡之光的专栏
03-22 3万+
打工打成股东，然后经历公司清盘，也算是人生一大体验了，呵呵。保持乐观心态，开始寻找下一个目标。 过完年开始找工作，没成想自视甚高的我居然没有接到任何一个我向往的大公司面试电话，怎么会这样？？？ 难道我命中注定只能待在小公司，~~~~(>_ 好不容易朋友推荐了SunGard面试，做摩根史丹利项目的，面试自我感觉良好，可结果还是败了。原因是技术不够强，为什么啊？我面试题基本都答对了啊。 过了近三
jqgrid 加载本地树形数据
最新发布
06-06
其中，`mydata` 是本地的树形数据，`treeGrid` 属性设置为 `true` 表示开启树形表格功能，`treeGridModel` 属性设置为 `'adjacency'` 表示使用邻接模型，`ExpandColumn` 属性设置为 `'name'` 表示以 `name` 列作为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值