eaysui中treegrid无法显示父节点

凌霄玉阶非所愿

已于 2022-11-18 17:20:31 修改

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 JQuery Easyui 文章标签： javascript 前端 easyui

于 2022-03-10 08:41:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42064877/article/details/123391975

前端同时被 2 个专栏收录

37 篇文章

订阅专栏

JQuery Easyui

10 篇文章

订阅专栏

本文详细讲述了如何修正EasyUI TreeGrid中数据绑定的问题，包括调整FPARENT到_parentId、修复数据源问题，并提供了一个实际案例和前后对比。通过解决这些问题，确保了父节点的正确显示和数据完整呈现。

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

后台代码查询的结果为：
在这里插入图片描述

放置内容的盒子：

  <table id="blocfield" class="easyui-treegrid">
   </table>

原先的错误写法为：

    $.ajax({
        data: {
            ajaxMethod: 'ClIQUE'
        },
        type: "post",
        dataType: 'json',
        cache: false,
        async: false,
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                data[i]._parentId = data[i].FPARENT;   //这个是重点，要把父节点换成_parentId （必须），记得前面有“_” ，他是用来记录父级节点，没有这个属性，是无法展示父级节点，其次就是这个父级节点必须存在，不然信息也是展示不出来，在后台遍历组合的时候，如果父级节点不存在或为0时，此时 _parentId 应该不赋值。如果赋值 “0” 则显示不出来
            }
            $('#blocfield').treegrid({
                data:data,              //**出错问题1，这里我绑定了一个数据源data**
                idField: "BLOCFCODE",  //定义标识树节点的键名字段
                method: "GET",         //请求方式
                rownumbers:true,
                treeField: "BLOCFNAME",//定义树节点的字段
                fit: true,        //网格自动撑满
                fitColumns: true, //设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
                singleSelect: true,
                columns: [[
                    { field: 'BLOCFNAME', title: '菜单名称', align: 'left', width: 100},
                    { field: 'BLOCFCODE', title: '菜单编号', align: 'left', width: 100 },
                    { field: '_parentId', title: '父节点', align: 'left', width: 100 }, //**出错问题2，这里我绑定的是FPARENT
                    {
                        field: 'BLOCENABLE', title: '状态', align: 'center', width: 100,
                        formatter: function (value, row, index) {
                            if (value == 1) {
                                return "<div style='color:green'>启用</div>";
                            } else {

                                return "<div style='color:red'>禁用</div>";
                            }
                        }
                    }
                ]],
                onDblClickRow: function (row) {

                },
                toolbar: '#tb'
            })
            $('#blocfield').treegrid('loadData', { 'rows': data }); //**出错问题3，这里原来没有写，是在里面绑定的data
        }
    });

效果图为：
在这里插入图片描述

修改后的写法为：

  $.ajax({
        data: {
            ajaxMethod: 'ClIQUE'
        },
        type: "post",
        dataType: 'json',
        cache: false,
        async: false,
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                data[i]._parentId = data[i].FPARENT;
            }
            $('#blocfield').treegrid({
                idField: "BLOCFCODE",
                method: "GET",
                rownumbers:true,
                treeField: "BLOCFNAME",
                fit: true,
                fitColumns: true,
                singleSelect: true,
                columns: [[
                    { field: 'BLOCFNAME', title: '菜单名称', align: 'left', width: 100},
                    { field: 'BLOCFCODE', title: '菜单编号', align: 'left', width: 100 },
                    { field: '_parentId', title: '父节点', align: 'left', width: 100 },
                    {
                        field: 'BLOCENABLE', title: '状态', align: 'center', width: 100,
                        formatter: function (value, row, index) {
                            if (value == 1) {
                                return "<div style='color:green'>启用</div>";
                            } else {

                                return "<div style='color:red'>禁用</div>";
                            }
                        }
                    }
                ]],
                onDblClickRow: function (row) {

                },
                toolbar: '#tb'
            })
            $('#blocfield').treegrid('loadData', { 'rows': data });
        }
    });

效果图：
在这里插入图片描述

treegrid数据源展示案例：
{
“total”: 25,
“rows”: [
{
“id”: 1,
“name”: “全国”,
“_parentId”: null //没有对应的父级节点为null
},
{
“id”: 2,
“name”: “北京市”,
“_parentId”: 1, //对应的父级节点
}，
{
“id”: 3,
“name”: “河北省”,
“_parentId”: 1, //对应的父级节点
}
]
}