【easyui】treeGrid显示树形结构

返回数据结构：

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;
    }

显示效果