美文网首页
根据id,pid生成树结构,再生成id,pid形式

根据id,pid生成树结构,再生成id,pid形式

作者: Sxy97 | 来源:发表于2018-03-22 18:04 被阅读0次

    最近做一个树形表格,从数据库读出来给前端后,用插件老是有一些显示的错误,可能是因为插件还需要数据按顺序排好,so就有了这种转树再转回来的奇葩想法

    var data = [{
        "Id": 1,
        "Key": "params",
        "Value": "",
        "Pid": -1
    }, {
        "Id": 3,
        "Key": "filter",
        "Value": "",
        "Pid": 1
    }, {
        "Id": 2,
        "Key": "method",
        "Value": "Post|Get",
        "Pid": 1
    }, {
        "Id": 4,
        "Key": "$and",
        "Value": "",
        "Pid": 3
    }, {
        "Id": 6,
        "Key": "it:pt",
        "Value": "@it:pt",
        "Pid": 4
    }, {
        "Id": 5,
        "Key": "bo:well",
        "Value": "@bo:well",
        "Pid": 4
    }]
    console.log(readTree(getTree(data, -1)[0], []))
    //转成树
    function getTree(data, Pid) {
        let result = []
        let temp
        for (let i = 0; i < data.length; i++) {
            if (data[i].Pid == Pid) {
                temp = getTree(data, data[i].Id)
                if (temp.length > 0) {
                    data[i].children = temp
                }
                result.push(data[i])
            }
        }
        return result
    }
    
    //树再转回来
    function readTree(data, val) {
        val.push({
            Id: data.Id,
            Key: data.Key,
            Value: data.Value,
            Pid: data.Pid
    
        })
        if (data.children) {
            for (let i = 0; i < data.children.length; i++) {
                readTree(data.children[i], val)
            }
            return val
        }
    
    }
    
    
    [ { Id: 1, Key: 'params', Value: '', Pid: -1 },
      { Id: 3, Key: 'filter', Value: '', Pid: 1 },
      { Id: 4, Key: '$and', Value: '', Pid: 3 },
      { Id: 6, Key: 'it:pt', Value: '@it:pt', Pid: 4 },
      { Id: 5, Key: 'bo:well', Value: '@bo:well', Pid: 4 },
      { Id: 2, Key: 'method', Value: 'Post|Get', Pid: 1 } ]
    

    相关文章

      网友评论

          本文标题:根据id,pid生成树结构,再生成id,pid形式

          本文链接:https://www.haomeiwen.com/subject/ditzqftx.html