【easyui】treeGrid显示树形结构

客官°小女子只卖身不卖艺 2022-06-13 05:20 250阅读 0赞

## 返回数据结构： ##

var data = [{
       "id":1,"name":"name1","pid":null},{
       "id":2,"name":"name2","pid":1}]

## 列表初始化 ##

function initDataGrid() { 
            treeGrid = $('#treeGrid').treegrid({
                idField : 'id',
                treeField : 'name',
                parentField : 'pid',
                rownumbers : true,
                pagination : false,
                sortName : 'seq',
                sortOrder : 'asc',
                frozenColumns: [[{
                    field: 'id',
                    title: 'id',
                    hidden: true
                }, {
                    field: 'name',
                    title: '名称',
                    width: 200,
                    align: 'center',
                    sortable: true,
                    formatter:linkValueFormatter
                }]],
                toolbar: '#toolbar',
                onLoadSuccess: function () { 
                    $(this).treegrid('clearChecked');
                    $(this).treegrid('clearSelections');
                },
                onRowContextMenu: function (e, rowIndex, rowData) { 
                    e.preventDefault();
                    $(this).treegrid('unselectAll').datagrid('uncheckAll');
                    $(this).treegrid('selectRow', rowIndex);
    
                    if ($("#menu > div").size() > 1) {
                        $('#menu').menu('show', {
                            left: e.pageX - 10,
                            top: e.pageY - 5
                        });
                    }
                },
                onClickCell: function (rowIndex, field, value) { //单元格点击事件
    
                },
                loadFilter: function (data, parent) { 
                    var opt = $(this).data().treegrid.options;
                    return treeFilter(data, opt);
                }
            });
        }

## 格式化函数 ##

/** * loadFilter: function (data, parent) { * var opt = $(this).data().treegrid.options; * return treeFilter(data, opt); * } * * idField : 'id' * treeField : 'text' //必须指定 * parentField : 'pid' //必须指定 * @param data * @param opt * @returns */
        function treeFilter(data, opt) {
            var idField,
            treeField,
            parentField;
            if (opt.parentField) {
                idField = opt.idField || 'id';
                treeField = opt.treeField || 'text';
                parentField = opt.parentField;
    
                var i,
                l,
                treeData = [],
                tmpMap = [];
    
                for (i = 0, l = data.length; i < l; i++) {
                    tmpMap[data[i][idField]] = data[i];
                }
    
                for (i = 0, l = data.length; i < l; i++) {
                    if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
                        if (!tmpMap[data[i][parentField]]['children'])
                            tmpMap[data[i][parentField]]['children'] = [];
                        data[i]['text'] = data[i][treeField];
                        tmpMap[data[i][parentField]]['children'].push(data[i]);
                    } else {
                        data[i]['text'] = data[i][treeField];
                        treeData.push(data[i]);
                    }
                }
                return treeData;
            }
            return data;
        }

## 显示效果 ##

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220613/e14afd60cd784e21a39c94c83662656c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关树形结构渲染

今天终于得空了，正好有朋友问我树形数据结构如何渲染，我在网上给他搜简单易懂的发现好多意思不够简明我就写了一个递归小方法方便大家理解，之后自己需要什么就拿去改一改就好了

ゝ一世哀愁。/ 2022年12月25日 14:55/ 0 赞/ 222 阅读

相关 eclipse-中如何显示工程树形结构

打开eclipse，左边工程会有一个倒三角，点击一下，选择package presentation ，然后选择hierarchical，就是树形结构了。如下图： ![在这

深碍√TFBOYSˉ_/ 2022年12月21日 06:10/ 0 赞/ 278 阅读

相关 Windows 树形结构显示文件夹目录结构 - tree

Windows 树形结构显示文件夹目录结构 - tree 1. `tree` Microsoft Windows [版本 10.0.19041.450]

客官°小女子只卖身不卖艺/ 2022年12月06日 15:08/ 0 赞/ 314 阅读

相关 linux--tree命令以树形结构显示文件目录结构

tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中。注：此处以ubun

﹏ヽ暗。殇╰゛Y/ 2022年09月25日 14:24/ 0 赞/ 305 阅读

相关打印一个目录，并以树形结构显示

import java.io.; import java.util.; public class VisualDirectory {

深碍√TFBOYSˉ_/ 2022年08月27日 10:51/ 0 赞/ 183 阅读

相关 Redmine 父子问题树形结构显示技巧

(2015-03-31 16:35:19) 在 redemine 问题列表时，如果需要显示父子关系树形，则要求顺序按父在子前面的方式排序，假设按主题排序。可以在主题的序

╰+攻爆jí腚メ/ 2022年07月14日 12:22/ 0 赞/ 375 阅读

相关数据结构——树形结构概念

数据结构——树形结构概念线性数据结构中每个元素只有一个前驱元素和一个后继元素，即前驱元素和后继元素之间的关系是一对一的，但是树形结构中每个元素只有一个前驱元素，但是可

野性酷女/ 2022年06月16日 11:13/ 0 赞/ 279 阅读

相关【easyui】treeGrid显示树形结构

返回数据结构： var data = [{ "id":1,"name":"name1","pid":null},{ "id":2,"n

客官°小女子只卖身不卖艺/ 2022年06月13日 05:20/ 0 赞/ 251 阅读

相关 IDEA创建Package时，显示树形结构

点击此处调出设置列表：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

小鱼儿/ 2022年03月15日 12:00/ 0 赞/ 271 阅读

相关 bootstrap树形结构

先看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

深碍√TFBOYSˉ_/ 2021年10月18日 23:40/ 0 赞/ 496 阅读