特殊属性--treeid

这是一个非常重要的属性,treeid对于List组件来说它并不是显示的定义在数据结构中。但它能够影响对list组件的编辑与修改

先放一段list用的数据结构,后面的说明都以下例代码说明

  Pager({
    data: {
      mylist: Pager.list({
        listClass: 'list-class',
        data: [
          '数据子项-1',
          {title: '数据子项-2', tap: 'tapAction'},
          {title: '数据子项-3'},
          {title: '数据子项-4'}
        ]
      })
    },
    tapAction: function(e, param){
      /* do something*/
    }
  })

结构

  <ui-list list="{{mylist}}" />

treeid是怎么定义的

我们从list组件的properties.list中获得原始数据,开始对原始数据的data数据进行遍历解析

纯字符串(或者number数据)数据

将这一部分数据从新封装为Object结构

  let nItem = {title: '数据子项-1'}
为每一项数据补上treeid
  nItem.attr = {'data-treeid': suid(key)}  // 补上一个随机值作为该项数据的treeid

attr属性中的data-id或者iddata-treeid在wxml的解析中被渲染成data-*的数据(小程序模板对于动态属性的绑定有bug, 结构太冗余,所以这里我们只取关键的Id数据,保持结构精简,其他属性通过实例方法attr来获得).

经过数据解析后,内存中的数据结构的data变成了下例这样

Pager({
  data: {
    mylist: Pager.list({
      listClass: 'list-class',
      data: [
        {title: '数据子项-1', attr: {'data-treeid': 'randomid'}},
        {title: '数据子项-2', attr: {'data-treeid': 'randomid'}},
        {title: '数据子项-3', attr: {'data-treeid': 'randomid'}},
        {title: '数据子项-4', attr: {'data-treeid': 'randomid'}},
      ]
    })
  }
})

应用实例

实例方法findIndex

list组件的实例方法findIndex能够找出搜索数据在数据结构中的下标值
下例findIndex方法经过抽简,并不是完整代码

  /*
   * param: {String}  指定的treeid值
  */
  findIndex: function (param) {
    let $selectIndex
    if (param) {
      let $list = this.data.$list
      let $data = $list.data
      for (let ii = 0; ii < $data.length; ii++) {  // 遍历内存中的data数组
        const item = $data[ii]
        const attr = item.attr
        const treeid = attr['data-treeid']||attr['treeid']
        if (lib.isString(param)) {
          if (treeid == param) {  // 匹配到正确的treeid并找到其下标值
            $selectIndex = ii;
            break;
          }
        }
      }
    }
    return $selectIndex
  },

实例方法delete

delete方法,删除指定的数据

  delete: function (treeid) {
    if (lib.isString(treeid)) {
      let $list = this.data.$list
      let $data = $list.data
      let $selectIndex = this.findIndex(treeid)
      if ($selectIndex || $selectIndex == 0) {
        $data.splice($selectIndex, 1)
        this.setData({ $list })
      }
    }
    return this
  },

还有更多的方法使用到treeid属性,如update, attr等,可见treeid这个隐形属性具有非常广泛的使用场景。

怎样获得TREEID

treeid被设置在数据项结构上,通过事件方法我们可以获得treeid,扩展上例中的tapAction方法

  tapAction: function(e, param){
    const currentTarget = e.currentTarget
    const dataset = currentTarget.dataset
    const treeid = dataset.treeid
    // 更具treeid我们可以扩展符合需求的逻辑方法
  }