children子元素集

tree组件能够应用于非常多的场景,因此我们需要非常灵活的控制tree组件的一些子集结构,children元素集包含了所有有子集的父级元素实例

实例代码

源数据

  // 以上省略一万字
  {
    $$id: 'mytree',
    data: [
      {title: '', idf: 'level-1'},
      {title: '', parent: 'level-1'},
      {title: '', parent: 'level-1'},

      {title: '', idf: 'level-2'},
      {title: '', parent: 'level-2'},
      {title: '', parent: 'level-2'},

      {title: '', idf: 'level-3', parent: 'level-2'},
      {title: '', parent: 'level-3'},
      {title: '', parent: 'level-3'}
    ]
  }

上述代码经过list数据过滤后的内存结构如下

初步筛选数据

  {
    data: [
      {title: '', idf: 'level-1', attr: {'data-treeid': 'randomid'}},
      {title: '', parent: 'level-1'},
      {title: '', parent: 'level-1'},

      {title: '', idf: 'level-2', attr: {'data-treeid': 'randomid'}},},
      {title: '', parent: 'level-2'},
      {title: '', parent: 'level-2'},

      {title: '', idf: 'level-3', parent: 'level-2', attr: {'data-treeid': 'randomid'}},},
      {title: '', parent: 'level-3'},
      {title: '', parent: 'level-3'}
    ]
  }

以上内存结构仅仅补全了我们需要的关键属性,每一个拥有子集节点都补全了自己唯一的treeid,在经过tree算法的处理之后,我们得到如下内存tree结构

渲染用数据

  {
    $$id: 'mytree',
    data: [
      {
        title: '', idf: 'level-1', 
        "@list": {
          $$id: 'randomid',  // 根据treeid自动生成
          data: [
            {title: '', parent: 'level-1'},
            {title: '', parent: 'level-1'},
          ],
          listClass: 'list-class',
          itemClass: 'list-item-class'
          show: true,
        }
      },

      {
        title: '', idf: 'level-2', 
        "@list": {
          $$id: 'randomid',  // 根据treeid自动生成
          data: [
            {title: '', parent: 'level-2'},
            {title: '', parent: 'level-2'},
            {
              title: '', idf: 'level-3', parent: 'level-2', 
              "@list": {
                $$id: 'randomid', // 根据treeid自动生成
                data: [
                  {title: '', parent: 'level-3'},
                  {title: '', parent: 'level-3'}
                ],
                listClass: 'list-class',
                itemClass: 'list-item-class'
                show: true,
              }
            },
          ],
          listClass: 'list-class',
          itemClass: 'list-item-class'
          show: true,
        }
      },
    ]
  }

上述代码中的所有randomid是唯一的父级treeid值,其所在的@list属性会自动匹配list组件并生成一个list的实例
该treeid的值和所生成的list实例将会组合成一个key, value的集合,{treeid: listInstance},该集合在tree组件实例化后merge到tree实例的children的集合中

获得tree实例的children集合

  const treeInst = Pager.getElementsById('mytree')  // 获得tree的实例
  console.log(treeInst.children) 
  /*
    {
      randomid-1: list-inst,
      randomid-2: list-inst,
      randomid-3: list-inst
    }
  */
  const listInst = treeInst.children['treeid-from-event']
  listInst.toggle()  // toggle为list组件的实例方法,用于控制显示与隐藏
  listInst.show()  
  listInst.hide()  
  listInst.append({....})  // 追加数据
  listInst.delete('one treeid') // 删除数据

至此我们可以取得属于该tree组件上的所有节点的list实例,并运用list实例的实例方法控制操作