小程序-树形结构

递归多级的树形结构，用二位数组展示和收缩的

planList2: [
      {
        name: '第一个',
        value: '1',
        pid: 0, // 父级 = 关联上一个级别
        current: 123456, // 当前 = 唯一值
        leftIndex: 0, // 缩进位移
        primary: 1 // 主键 = 区分多个层级的 展示-收缩3个级别
      },
          {
            name: '第一个- 第1个',
            value: 2,
            pid: 123456,
            current: 555123,
            leftIndex: 1, // 缩进位移
          },
          {
            name: '第一个- 第2个', 
            value: 3,
            pid: 123456,
            current: 555234, // 父级 - 子
            leftIndex: 1, // 缩进位移
            primary: 2 // 主键 如果有children 子级，就把 index 加到 primary 上面。
          },
              {
                name: '第2级- 第1个 第1个',
                value: 4,
                pid: 555234,
                leftIndex: 2, // 缩进位移
                current: 666123,  // 父级 - 子
              },
              {
                name: '第2级- 第2个 第2个',
                value: 5,
                pid: 555234,
                leftIndex: 2, // 缩进位移
                current: 666234,
              },

          // 第二个
          {
            name: '第一个- 第3个',
            value: 6,
            pid: 123456,
            current: 555456, // 父级 - 子
            leftIndex: 1, // 缩进位移
            primary: 2 // 主键
          },
              {
                name: '第3级- 第1个 第1个',
                value: 7,
                pid: 555456,
                leftIndex: 2, // 缩进位移
                current: 666789,  // 父级 - 子
              },
              {
                name: '第3级- 第2个 第2个',
                value: 9,
                pid: 555456,
                leftIndex: 2, // 缩进位移
                current: 666456,
              },

      {
        name: '第一个',
        value: 11,
        pid: 0, // 父级
        current: 654321, // 当前
        primary: 1 // 主键
      },

    ],

 

  handleOpen(e) {
    const pid =  e.currentTarget.dataset.pid;
    const primary =  e.currentTarget.dataset.primary;
    const current =  e.currentTarget.dataset.current;

    console.log(pid,primary,current)

    /**
     * primary 存在主键 就是父级
     * handleOpen() 
     *    selection_id == pid 如果是等价关系 操作显示和隐藏 
     */
    if(primary) {
      const selection_id = current;

      const planList2 = this.data.planList2;
      planList2.forEach(item => {
        if(item.pid == selection_id) {
          item.show = !item.show
        }
      })
      this.setData({
        selection_id,
        planList2
      });


    }

  },

 

<block wx:for="{{planList2}}" wx:key="title">
                <view wx:if="{{!item.show}}" bind:tap="handleOpen" data-pid="{{item.pid}}" data-primary="{{item.primary}}" data-current="{{item.current}}" style="padding-left: {{item.leftIndex * 15}}px;" class="table-item fs14" >
                  <block wx:if="{{item.primary}}">
                    <mp-icon  class="flex column txt-title" icon="arrow" type="outline" size="{{10}}"></mp-icon>
                  </block>
                  <text class="flex column txt-title txt color-deep-blue">{{item.name||'--'}}</text>
                </view>
              </block>

 树形后端如果是一个三维的树形结构，可以先把树形转化为二维的结构。初始化只需要四个参数 (data, [], 0, 0)

递归方法传参如下：

原始数据和有子数组 children;

递归存储数组list;

当前索引主键和缩进 tiny;

当前id;

所有父级id设置pidlist;

 

在开发的过程中，父节点要点击收缩子节点，在子节点上绑定一个父节点 ，现在统一定义父子节点别名，子节点定义为 cid，父级节点定义为 pid，如果父节点点击收缩的，可以把子节点合并起来。

这时候，父节点 要跨级 收缩子节点，只需要把父节点在没一个子节点上绑定加上即可，有一种简单的方式，就是在每一个子节点上加一个 Array 数组字段，然后把逐级往下传递，这样最后深的子节点就包含了父上的索引节点.

item.pid_list = [...parent_muti_id, myid];

如何区分是父节点，可以设置要给 primary 主键为遍历的索引值，只需要在有子级 children .length 长度时，设置一次主键即可。

如果要定义每一层子级不断缩进展示，需要给没个字迹设置一个 初始值 leftIndex 为 0，然后每次递归循环 leftIndex +1.