zoukankan      html  css  js  c++  java
  • easyui tree 的数据格式转换

    easyui tree 的数据格式转换

    一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点):

    复制代码
    var serverList = [
        {id : 2,pid : -1},
        {id : 1,pid : -1},
            {id : 3,pid : 1},
            {id : 4,pid : 1},
            {id : 5,pid : 1},
            {id : 9,pid : 1},
                {id : 10,pid : 9},
                {id : 8,pid : 9},
                    {id : 7,pid : 8},
                        {id : 6,pid : 7},
                            {id : 11,pid : 6},
                                {id : 12,pid : 11},
                                    {id : 16,pid : 12},
                                        {id : 17,pid : 16},
                                            {id : 18,pid : 17},
                                            {id : 19,pid : 17},
                                            {id : 20,pid : 17},
                                            {id : 21,pid : 17},
                                                {id : 22,pid : 21},
                                            {id : 23,pid : 17},
                                            {id : 24,pid : 17},
                                            {id : 25,pid : 17},
                                            {id : 26,pid : 17},
                                                {id : 27,pid : 26},
                                                    {id : 28,pid : 27},
                                                    {id : 29,pid : 27},
                                                        {id : 30,pid : 29},
                                                        {id : 31,pid : 29},
        {id : 13,pid : -1},
            {id : 14,pid : 13},
                {id : 15,pid : 14}
    ];
    复制代码

    我通过缩进来显示它们的父子关系。

    然而,easyui tree所需求数据的格式是这样的:

    复制代码
    var treeList = [
        {id : 2},
        {id : 1,children : [
            {id : 3},
            {id : 4},
            {id : 5},
            {id : 9,children : [
                {id : 10},
                {id : 8,children : [
                    {id : 7,children : [
                        id : 6
                    ]}
                ]},
           ...... ]} ]} ];
    复制代码

    如果采用分层加载,则只需通过简单的转换操作就能将后台查询出来的一层数据list转换成easyui tree的数据格式,

    但是如果遇到一次全部加载的需求,我们就必须将后台查询出来的serverList转换成符合easyui tree 数据格式的treeList,为此我写了如下转换的JS方法:

    复制代码
    function TreeHelper(list){
        this.list = list;
    }
    (function(TreeHelper){
        function getAllChildren(list,item){
            var children = getNextLevelChildren(list,item);
            for(var i=0,ii=children.length;i<ii;i++){
                getAllChildren(list,children[i]);
            }
        }
        //遍历list剩下的数据,找到item的下一层的子节点
        function getNextLevelChildren(list,item){
            var children = [];
            for(var i=list.length-1;i>=0;i--){
                var mid = list[i];
                if(mid.pid === item.id){
                    delete mid.pid;
                    children.push(mid);
                    list.splice(i,1);
                }
            }
            if(children.length > 0){
                item.children = children;
            }
            return children;
        }
        TreeHelper.prototype.dataTransferer = function(){
            var list = this.list;
            //根节点必须在数组前面
            list.sort(function(a,b){
                if(a.pid > b.pid){
                    return 1;
                }else{
                    return -1;
                }
            });
            var item,
                result = [];
            //遍历根节点,递归处理其所有子节点的数据
            //每处理完一个根节点,就将其及其所有子节点从list中删除,加快递归速度
            while(list.length){
                item = list[0];
                list.splice(0,1);
                delete item.pid;
                getAllChildren(list,item);
                result.push(item);
            }
            return result;
        };
    })(TreeHelper);
    复制代码

    测试:

    复制代码
    var treeData = new TreeHelper(serverList).dataTransferer();
    console.log(JSON.stringify(treeData));
    
    输出:
    [{"id":2},{"id":13,"children":[{"id":14,"children":[{"id":15}]}]},{"id":1,"children":[{"id":3},{"id":9,"children":[{"id":10},{"id":8,"children":[{"id":7,"children":[{"id":6,"children":[{"id":11,"children":[{"id":12,"children":[{"id":16,"children":[{"id":17,"children":[{"id":19},{"id":18},{"id":21,"children":[{"id":22}]},{"id":26,"children":[{"id":27,"children":[{"id":28},{"id":29,"children":[{"id":31},{"id":30}]}]}]},{"id":25},{"id":24},{"id":23},{"id":20}]}]}]}]}]}]}]}]},{"id":4},{"id":5}]}] 
    复制代码
     
     
    分类: jquery easyui
  • 相关阅读:
    第42天:焦点图
    第41天:匀速、缓动运动和图片无缝滚动
    第40天:字符串操作:截取字符串
    MyBatis一级缓存(转载)
    Mycat 做简单的读写分离(转载)
    ui设计的好网站(转载)
    Java面试常问的问题(转载)
    ios学习的博客地址
    策略模式
    dubbo框架的简单介绍
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3219137.html
Copyright © 2011-2022 走看看