easyui tree支持扁平、简单数据结构扩展

  easyui的tree组件支持的数据结构是嵌套模型的,如下

[{"id":1,"text":"text1","children":[{"id":4,"text":"text1_1","pid":1}]},
{"id":2,"text":"text2"},
{"id":3,"text":"text3"}]

  如果easyui tree想加载类型ztree的简单数据结构(扁平数据结构,依据parentId来确定父子关系的数据结构),需要自己扩展loadFilter来将简单/扁平数据结构处理为嵌套格式的数据才行。

  扁平数据结构示例

[{"id":1,"text":"text1"},
{"id":4,"text":"text1_1","pid":1},
{"id":2,"text":"text2"},
{"id":3,"text":"text3"}]

  相对于嵌套数据结构,服务器生成还是比较麻烦的,不如扁平数据结构好生成,所以网上有人写了个扩展将返回的扁平数据结构处理为easyui tree需要的嵌套数据结构。

 

  easyui tree支持扁平、简单数据结构扩展示例如下

easyui tree支持扁平、简单数据结构扩展

注意:easyui版本需要1.2.6+以上,才支持loadFilter配置

	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script> $.fn.tree.defaults.loadFilter = function (data, parent) {//扩展,注意导入循序,一定要放在easyui框架下面
            var opt = $(this).data().tree.options;
            var idFiled, textFiled, parentField;
            if (opt.parentField) {
                idFiled = opt.idFiled || 'id';
                textFiled = opt.textFiled || 'text';
                parentField = opt.parentField;
                var i, l, treeData = [], tmpMap = [];
                for (i = 0, l = data.length; i < l; i++) {
                    tmpMap[data[i][idFiled]] = data[i];
                }
                for (i = 0, l = data.length; i < l; i++) {
                    if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                        if (!tmpMap[data[i][parentField]]['children'])
                            tmpMap[data[i][parentField]]['children'] = [];
                        data[i]['text'] = data[i][textFiled];
                        tmpMap[data[i][parentField]]['children'].push(data[i]);
                    } else {
                        data[i]['text'] = data[i][textFiled];
                        treeData.push(data[i]);
                    }
                }
                return treeData;
            }
            return data;
        };
    </script>
</head>
<body>
<script>
    $(function () {//只需要配置parentField为你生成的扁平数据中的父id键名称即可。
        $('#tree').tree({ url: 'data.txt', parentField: 'pid', method: 'get' });
    });
</script>
<ul id="tree"></ul>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:easyui tree支持扁平、简单数据结构扩展

评论(0)Web开发网
阅读(768)喜欢(1)easyui开发技巧