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

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