树状数据操作

目录

• 树结构－扁平化

{
  text: '一级', // 要显示的文本
  value: 1,  // 唯一值
  checked: false, // 选中转态
  children: [{
    text: '二级-1',
    value: 11,
    checked: false,
    children: [{
      text: '三级-1',
      value: 111,
      checked: false,
    }]
  }, {
    text: '二级-2',
    value: 12,
    checked: false,
  }]
}

需要转化成以下格式

[ { text: '一级',
    value: 1,
    checked: false,
    disabled: false,
    showSign: true,
    parent: null },
  { text: '二级-1',
    value: 11,
    checked: false,
    disabled: false,
    parent: 1 },
  { text: '三级-1',
    value: 111,
    checked: false,
    disabled: false,
    parent: 11 },
  { text: '二级-2',
    value: 12,
    checked: false,
    disabled: false,
    parent: 1 } ]

代码实现

let tree = {
  text: '一级', // 要显示的文本
  value: 1,  // 唯一值
  checked: false, // 选中转态
  children: [{
    text: '二级-1',
    value: 11,
    checked: false,
    children: [{
      text: '三级-1',
      value: 111,
      checked: false,
    }]
  }, {
    text: '二级-2',
    value: 12,
    checked: false,
  }]
}
var result = []
function treeToLine(tree, treeKey, isRoot = true, root = null) {
  if (!tree || !tree.children) return result
  let obj = {}
  for (let key in tree) {
    if (tree.hasOwnProperty(key) && key !== 'children') {
      obj[key] = tree[key]
    }
  }
  obj.parent = isRoot ? null : root[treeKey]
  result.push(obj)
  for (let child of tree.children) {
    if (child && child.children) {
      treeToLine(child, treeKey, false, tree)
    } else if (child && !child.children){ // 最后一层
      child.parent = tree[treeKey]
      result.push(child)
      return result
    }
  }
}
console.log(treeToLine(tree, 'value'))

其中函数第二个参数为每层树的唯一值，用于parent进行标识所属的父节点。

• 扁平化－树结构
  将上述扁平化数据格式化成树状数据：

实现代码：

function lineToTree(data, value = 'value', parentId = 'parent') {
  let children = 'children'

  let valueMap = [], tree = []
  data.forEach(v => {
    valueMap[v[value]] = v
  })

  data.forEach(v => {
    let parent = valueMap[v[parentId]]
    if(parent) {
      !parent[children] && (parent[children] = [])
      parent[children].push(v)
    } else {
      tree.push(v)
    }
  })
  return tree
}

其中参数value是树状结构的唯一标识，parentId是父节点的键值。

1000个节点权限树性能优化

• 组装后台返回的数据结构

• 通过关键字搜索时遍历tree 对比节点下关键字是否存在

  
  image.png
  image.png
  image.png