easyui 树结构

最新推荐文章于 2020-06-22 01:50:42 发布

Aimyone

最新推荐文章于 2020-06-22 01:50:42 发布

阅读量288

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/qq_36636312/article/details/105629687

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我想做一个类似tree这种结构的数据展示，如图所示
在这里插入图片描述
1，后台传过来的数据结构

  		index=0，1是子节点数据  
		index=2，3是父节点数据

注意：父节点数据中的ID要与子节点数据中的_parentId对应，而且_parentId是指定字段名称，不可自定义

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420105734485.png

2，获取数据

$('#weidatagrid2').treegrid('loadData', data.griddata);

3，展示数据
这里主要注意
1，这里是treegrid类型，之前一直使用datagrid，复制过来一直忘记改了，导致树形一直没有出来
2，treeField:‘cbtyle’,这个表示要做树节点的字段部分，所以父节点和子节点数据都要含有这个字段
3，idField:‘ID’,这个ID一定要保持唯一性，不然会影响点击事件

$('#weidatagrid2').treegrid({

            method:'get',
            height: lheligt/2,
            rownumbers:true,
            singleSelect:true,
            autoRowHeight:false,
            clientPaging:true,
            remoteSort:false,
            emptyMsg:"暂无数据",
            sortName:"cbtyle",
            sortOrder:"asc",
            multiSort:true,
            treeField:'cbtyle',//做树节点的字段部分
            idField:'ID',//获取选中事件的数据信息
            animate:true,//在节点展开或折叠的时候是否显示动画效果
            // lines:true,//显示treegrid行
            // fitColumns: true,
            // resizable: true,
            columns:[[
                {field: 'ID', title: 'ID',align: 'left', halign: 'center', width:120,hidden:true},
                {field: 'cbtyle', title: '成本类型',sortable: true,  width:160,  align: 'left', halign: 'center',sortOrder:"asc",order:"desc"},
                {field: 'unitname', title: '单元名称',sortable: true,  width:480,  align: 'left', halign: 'center'},
                {field: 'unitcode', title: '单元编码',  width:70,  align: 'left', halign: 'center',hidden:true},
                {field: 'execprssion', title: '计算公式',  width:360,  align: 'left', halign: 'center',hidden:true},
                {field: 'opeater', title: '操作', width: 100, align: 'center',sort:true, halign: 'center',
                    formatter: function (value, row, index) {
                    if(row.unitname!=undefined){
                        var str ='<button type=\'button\' class=\'btn btn-primary bi-glyphicon\' οnclick="lookDetails(\'' + row.unitcode + '\')">查看</button>';
                        return str;
                    }
                    }
                }
            ]],
            onClickRow:function(row){
                if(row.cbtyle){
                    id=row.ID;
                    execprssion=row.execprssion;
                    unitcode=row.unitcode;
                    jsgzparam()
                }else{
                    $('#weidatagrid2').datagrid('loadData', []);
                }
            },
            onBeforeExpand: function(row){//点击节点展开事件
            
            }, onLoadSuccess:function(data){
                $('#weidatagrid2').treegrid('expandAll');//全部展开树节点
            }
        });