js 树形结构,以及数据层级汇总

关键点:递归,树形结构层级构造,树形结构层级汇总,树形结构去0值

树形结构构造

  因为要用到echarts 的旭日图,需要的数据的样子大致如下:

[
    {
        name:"z",
        value : 10,
        children:[
            {
                name:"zz",
                value :5,
                children:[
                    ...
                ]
            },{
                ...
            }
        ]
    },{
        ...
    }
]

  数据库中存储的信息是一个标准的树结构,大致字段如下:
  ID,PID,NAME,VALUE

  解决的思路是用递归,具体代码如下:

// 加载 树状数据,进行数据汇总
loadData: function (data, j, root) {
    // data 为后端取数的所有数据,j 为根节点, root 为每个节点的 id ,如果是最上级节点, 则为null,data 为无序状态
    var that = this;
    for (var i = 0; i < data.length; i++) {
        // 循环遍历所有节点,看父id 是否 等于 root ,如果是,说明此节点为 j 的children,继续
        if (data[i].pid == root) {
            var id = data[i].id;
            var pid = data[i].pid;
            var value = data[i].value || 0;
            var name = data[i].name || '';

            var temobj = {};          
            temobj.name = name;
            temobj.id = id;           
            temobj.pid = pid;
            temobj.value = value;            
            j.children = j.children || [];
            j.children.push(temobj);
        }
    }

    // 获取第一层级所有节点以后,继续循环 所有子节点,进行递归
    for (var i = 0; j.children && i < j.children.length; i++) {
        that.loadData(data, j.children[i], j.children[i].id);       
    }
},

exec:function(){
    var that = this;
    // 调用:
    var j = {};
    var root = "";
    // 服务端返回值
    var data = [];
    var res = that.loadData(data,j,root);
    return res.children;
}

进阶一:为每一层级加上level 标识

  因为某些原因,需要在汇总的树上加上每一层级的level
  思路:树形结构本身就是分层的,递归的逻辑就是先遍历所有祖先节点,在遍历子节点

  • 先遍历第一层所有节点
  • 在遍历第一层第一个的所有子节点
  • 在遍历第一层第一个子节点的第一个子节点
  • 遍历完成,遍历第一层第二个子节点
示意图

  所以可以考虑加一个level 字段,递归进入到下一层的时候,level +1, 当全部递归完成后返回的时候,level -1 具体代码如下:

var testpage = function () {
    this.render();
}

testpage.prototype = {

    consts: {
        level: 0,
    },

    // 加载 树状数据,进行数据汇总
    loadData: function (data, j, root) {
        // data 为后端取数的所有数据,j 为根节点, root 为每个节点的 id ,如果是最上级节点, 则为null,data 为无序状态
        var that = this;
        for (var i = 0; i < data.length; i++) {
            // 循环遍历所有节点,看父id 是否 等于 root ,如果是,说明此节点为 j 的children,继续
            if (data[i].pid == root) {
                var id = data[i].id;
                var pid = data[i].pid;
                var value = data[i].value || 0;
                var name = data[i].name || '';

                var temobj = {};
                temobj.name = name;
                temobj.id = id;
                temobj.level = that.consts.level;
                temobj.pid = pid;
                temobj.value = value;
                j.children = j.children || [];
                j.children.push(temobj);
            }
        }

        // 获取第一层级所有节点以后,继续循环 所有子节点,进行递归
        for (var i = 0; j.children && i < j.children.length; i++) {
            that.consts.level ++;
            that.loadData(data, j.children[i], j.children[i].id);
            that.consts.level --;
        }
    },

    render:function(){
        var that = this;
        // 调用:
        var j = {};
        var root = "";
        // 服务端返回值
        var data = [];
        var res = that.loadData(data,j,root);
        return res.children;
    }
}

return new testpage();

进阶二:循环汇总子节点的数据到父节点上

  数据库中的数据所有数据都在子节点上,父节点的值都是0,因需要前端过滤,所以数据的汇总只能在前端进行.
  思路:上一个方法已经在每个节点中加入了level 信息,那自然可以想到,用同样的方式,把每个子集的所有数据,汇总到上一级所有数据.
  之前计算level 的时候,可以发现,递归的逻辑图如下:


示意图

那么,可以利用level 字段 以及 栈,进行数据的汇总,代码如下

var testpage = function () {
    this.render();
}

testpage.prototype = {

    consts: {
        level: 0,
        sum:0,
        sumstack : []
    },

    // 加载 树状数据,进行数据汇总
    loadData: function (data, j, root) {
        // data 为后端取数的所有数据,j 为根节点, root 为每个节点的 id ,如果是最上级节点, 则为null,data 为无序状态
        var that = this;
        for (var i = 0; i < data.length; i++) {
            // 循环遍历所有节点,看父id 是否 等于 root ,如果是,说明此节点为 j 的children,继续
            if (data[i].pid == root) {
                var id = data[i].id;
                var pid = data[i].pid;
                var value = data[i].value || 0;
                var name = data[i].name || '';

                var temobj = {};
                temobj.name = name;
                temobj.id = id;
                temobj.level = that.consts.level;
                temobj.pid = pid;
                temobj.value = value;
                // 这里汇总数据
                that.consts.sum += value;
                j.children = j.children || [];
                j.children.push(temobj);
            }
        }

        // 获取第一层级所有节点以后,继续循环 所有子节点,进行递归
        for (var i = 0; j.children && i < j.children.length; i++) {
            that.consts.level ++;
            // 将结果压入栈中, 这么做的原因是,比如一个父节点有多个子节点,那么,每次遍历的时候,要先把之前的结果存起来
            that.consts.sumstack.push(that.consts.sum);
            that.consts.sum = 0;
            that.loadData(data, j.children[i], j.children[i].id);
            // 这一步的目的是,如果最底层节点上面有多层父节点,那么,要把直接汇总的和 加到祖父节点上去,否则祖父节点就是 0 了.
            // 简单来说就是 sumstack[1] += sumstack[2];  1,2, 表示level ,这里面是做了校验,防止报错
            that.consts.sumstack[(that.consts.sumstack.length - 2 >= 0) && (that.consts.sumstack.length - 2) || 0] += that.consts.sumstack[(that.consts.sumstack.length - 1 >= 0) && (that.consts.sumstack.length - 1) || 0];
            // 出栈,如示意图中的level3 返回到level2 的过程.
            j.value = (j.value || 0) + that.consts.sumstack.pop();
            that.consts.level --;
        }
    },

    render:function(){
        var that = this;
        // 调用:
        var j = {};
        var root = "";
        // 服务端返回值
        var data = [];
        var res = that.loadData(data,j,root);
        return res.children;
    }
}

return new testpage();

番外一:根据 基础数据和 数据表构造树

  思路:基础数据表 表结构: ID,PID,LEAF,NAME, 数据表表结构: NAME, 基础数据表ID,... 其中,数据表存储的是 基础数据表中的叶子节点, 所以前端构造树的时候,要根据基础表 本身的树结构,和数据表,把数据表的子节点数据放到 基础表的相应位置:
  做法也比较简单 ヽ(ー_ー)ノ,直接看代码就好:


// 基础表树信息,这个是原始的结果,还没有构造成树
var tree = [];
var treeinde = {};
// 记录原始树的id 的出现位置
for (var i = 0; i < tree.length; i++) {
    treeinde[tree[i].id] = i;
}

// rr 为数据表数据
// 树的id 大概是这样 K01, K0101 K010101 所以可以根据这个获取层级
for (var i = 0; i < rr.length; i++) {  
    var keys = Object.keys(rr[i]);
    var values = Object.values(rr[i]);
    // 遍历每个树形,赋值到树结构上去
    for (var j = 0; j < keys.length; j++) {
        tree[treeinde[rr[i].id]][keys[j]] = values[j];
        tree[treeinde[rr[i].id]]["ifzero"] = 1;
    }
}

进阶三:去除所有的零节点

  第二步中汇总的数据有个缺点,因为可能有些子节点 是0(具体的原因是,数据库只有存最叶子节点的数据,前端需要根据 原始树结构,以及数据表,来构造树,所以会有0 节点, 见番外),导致.
  思路:过滤叶子节点是不是0 很简单,直接判断 isleaf(数据库树形结构表存储) = 1 && value = 0 continue; 但是对于根节点就不是很好判断了,最简单的方式是重新遍历一遍树,去除掉0 ,但是这样做感觉不太好┗( ▔, ▔ )┛,于是考虑,通过两步,过滤掉为0 的数据: 第一步,过滤掉叶子节点为0 的,第二步,过滤掉没有 叶子节点的父节点 , 至于 某个节点有叶子节点但是叶子节点都为0 的情况, 不能过滤,因为是有数据的

  • 第一步: 直接在循环构造树的时候判断,然后过滤掉即可:
loadData: function (data, j, root) {
    var that = this;
    for (var i = 0; i < data.length; i++) {
        if (data[i].pid == root) {
            // 叶子节点,并且是0值的时候,返回
            if (!(data[i].value) && data[i].leaf) {
                continue;
            }
...
  • 第二步:先在初始化树的时候加上所有的子节点的父节点,然后 在构造树的时候,判断 当前数据的id 是否 在父节点的集合中
    具体如下:
// rr 为数据表数据
// 树的id 大概是这样 K01, K0101 K010101 所以可以根据这个获取层级
for (var i = 0; i < rr.length; i++) {
    // 将所有节点的父节点加到一个集合
    // 树的id 大概是这样 K01, K0101 K010101 所以可以根据这个获取层级
    var levelrr = Math.floor(rr[i].id.length / 2);
    // 比如当前节点id 是 K01010101,这里吧 K01 ,K0101,K010101 加入到集合
    for (var j = 1; j <= levelrr; j++) {
        that.consts.pids[j] = that.consts.pids[j] || {};
        that.consts.pids[j][rr[i].id.substring(0, j * 2 + 1)] = 1;
    }

    //原有的
    var keys = Object.keys(rr[i]);
    var values = Object.values(rr[i]);
    for (var j = 0; j < keys.length; j++) {
        tree[treeinde[rr[i].id]][keys[j]] = values[j];
        tree[treeinde[rr[i].id]]["ifzero"] = 1;
    }
}

-----------------------------------------

loadData: function (data, j, root) {
    var that = this;
    for (var i = 0; i < data.length; i++) {
        if (data[i].pid == root) {
            // 叶子节点,并且是0值的时候,返回
            if (!(data[i].value) && data[i].leaf) {
                continue;
            }

            var breakpoint = 1;

            // 非叶子节点,但是 查询回来的数据没有父节点是本身的
            for (var k in that.consts.pids[that.consts.level + 1]) {
                if (data[i].leaf || data[i].id.indexOf(k) != -1) {
                    breakpoint = 0;
                    break;
                }
            }

            if (breakpoint) {
                continue;
            }
.............

到此大致结束 破碗, 求赞 ︿(￣︶￣)︿

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,200评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,526评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,321评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,601评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,446评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,345评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,753评论 3赞 387
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,405评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,712评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,743评论 2赞 314
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,529评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,369评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,770评论 3赞 300
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,026评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,301评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,732评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,927评论 2赞 336