支付宝小程序树节点构建渲染单选多选等问题的处理

Posted phoenixhg

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了支付宝小程序树节点构建渲染单选多选等问题的处理相关的知识，希望对你有一定的参考价值。

介绍

因工作中需要完成一个不限层级的目录展示以及勾选问题，而支付宝小程序没有相关框架可用，故整理一套方案处理该类问题。
该篇文章主要是记录树结构数据的处理方法，当然也可用于web端，思路都是一样的。内容包括一维数组转化为树结构数据，树结构数据的渲染，父子节点的联动选择，历史节点的默认勾选等。
下面是针对关键性代码的一些解析。

源码

简单粗暴，直接上源码。

处理数据的类方法

/**
 * 图片空间目录结构排序
 */
const REG_CHAR_NUM = /[a-zA-Z0-9]/ // 字母和数字正则

class CatalogSort {
  /**
   * @param {Object} resData 从接口或缓存拿到的数据
   * @param {Boolean} isSingleChecked 是否单选 true-单选 false-多选
   * @param {Array} historyChecked 初始化时需要选中的ids(历史ids)
   */
  constructor(resData, isSingleChecked, historyChecked = []) {
    this.treeMap = null // 父-子id映射
    this.tree = null // 构造完成的树结构数据
    this.currentChecked = false // 当前点击选中状态，减少子节点递归次数
    this.isSingleChecked = isSingleChecked
    this.checkedList = historyChecked[0] === \'all\' ? [] : [...historyChecked] // 选中目录id的数组
    this.checkedNameList = [] // 选中的目录名称数组
    this.checkedAll = historyChecked[0] === \'all\' // 是否全选,只在初始加载时用到
    this.totalCount = 0 // 目录总数
    this.sortInit(resData)
  }
  sortInit(resData) {
    this.solveToTree(resData)
    this.sortByNumLetter(this.tree)
  }
  /**
   * 一维数据构造树结构
   * @param {Array} resData 从接口获取到的源数据
   */
  solveToTree(resData) {
    // 构建父-子映射
    this.treeMap = resData.reduce((acc, cur) => {
      cur.pictureCategoryName = cur.pictureCategoryName.trim()
      cur.children = []
      if (this.checkedAll) { // 如果全选，就填充选中的ids数组
        cur.checked = true
        this.checkedList.push(cur.pictureCategoryId)
      } else { // 否则根据初始化实例对象时的默认选中项设置checked是否选中
        cur.checked = this.checkedList.includes(cur.pictureCategoryId)
      }
      acc[cur.pictureCategoryId] = cur
      this.totalCount ++
      return acc
    }, {})
    // 初始化选中的目录名称列表，不直接在上面循环中构造，是为了控制与checkList索引一致
    this.checkedNameList = this.checkedList.reduce((acc, id) => {
      return acc.concat(this.treeMap[id].pictureCategoryName)
    }, [])
    // 构建树目录
    this.tree = resData.filter(item => {
      this.treeMap[item.parentId] && this.treeMap[item.parentId].children.push(item)
      return item.parentId === \'\'
    })
  }
  /**
   * 目录排序 按数字、字母、中文排序
   * @param {Array} tree 树结构数据
   */
  sortByNumLetter(tree) {
    tree.sort((item1, item2) => {
      if (REG_CHAR_NUM.test(item1.pictureCategoryName) || REG_CHAR_NUM.test(item2.pictureCategoryName)) {
        // 如果是数字或字母，先按照数字或字母由1-10...a-z...A-Z...排序
        if (item1.pictureCategoryName > item2.pictureCategoryName) {
          return 1
        } else if (item1.pictureCategoryName < item2.pictureCategoryName) {
          return -1
        }else{
          return 0
        }
      } else {
        // 如果是中文，按照规则排序(此处根据淘宝目录设置)
        return item1.pictureCategoryName.localeCompare(item2.pictureCategoryName, \'en\')
      }
    })
    tree.forEach(item => {
      if (item.children.length) {
        this.sortByNumLetter(item.children)
      }
    })
  }
  /**
   * 目录选择
   */
  selectNode(id) {
    let item = this.treeMap[id]
    item.checked = !item.checked
    this.currentChecked = item.checked
    if (this.isSingleChecked) {
      // 如果是单选，将上一次设置的值置为false
      const checkPrev = this.checkedList.shift()
      this.checkedNameList.shift()
      if (checkPrev) {
        this.treeMap[checkPrev].checked = false
      }
      this.setCheckedList(item.pictureCategoryId)
      return
    }
    this.setCheckedList(item.pictureCategoryId)
    this.checkChilds(item.children, item.checked)
    this.checkParents(item.parentId)
  } 
  /**
   * 目录选择的另一种方法(不推荐，递归了)，放在这里做个借鉴，此处只兼容了多选，等需要单选再继续设置
   */
  /*selectNodeAnother(tree, id) {
    for (let item of tree) {
      if (item.pictureCategoryId === id) {
        item.checked = !item.checked
        this.currentChecked = item.checked
        if (this.isSingleChecked) {
          return true
        }
        this.setCheckedList(item.pictureCategoryId)
        this.checkChilds(item.children, item.checked)
        this.checkParents(item.parentId)
        return true
      }
      if (item.children.length) {
        const res = this.selectNode(item.children, id)
        if (res) return res
      }
    }
    return null
  }*/
  /**
   * 子节点checked状态的改变
   * @param {Array} childItems 需要操作的子节点
   * @param {Boolean} checked 是否选中
   */
  checkChilds(childItems, checked) {
    if (childItems.length) {
      childItems.forEach(item => {
        // 如果子节点已经是当前的选中态，跳出，减少递归次数
        if (item.checked === this.currentChecked) return

        item.checked = checked
        this.setCheckedList(item.pictureCategoryId)
        this.checkChilds(item.children, checked)
      })
    }
  }
  /**
   * 父节点checked状态的改变
   * @param {String} parentId 父id
   * @param {Object} treeMap 父-子id映射对象
   */
  checkParents(parentId) {
    if (this.treeMap[parentId] && this.treeMap[parentId].children.length) {
      const parentChecked = this.treeMap[parentId].children.every(item => item.checked)
      if (this.treeMap[parentId].checked === parentChecked) return // 如果父节点与需要选中的状态一致，则退出循环，不需要再往上冒泡递归
      this.treeMap[parentId].checked = parentChecked
      this.setCheckedList(this.treeMap[parentId].pictureCategoryId)
      this.treeMap[parentId].parentId && this.checkParents(this.treeMap[parentId].parentId)
    }
  }
  /**
   * 设置选中ids
   * @param {String} id 正在设置checked属性的节点id
   */
  setCheckedList(id) {
    const checkedIndex = this.checkedList.findIndex(item => item === id)
    if (this.currentChecked && checkedIndex === -1) { // 如果当前态选中，且节点id不在选中数组中就填充
      this.checkedList.push(id)
      this.checkedNameList.push(this.treeMap[id].pictureCategoryName)
    } else if (!this.currentChecked && checkedIndex > -1) { // 如果当前态未选中，且节点id在选中数组中就删除
      this.checkedList.splice(checkedIndex, 1)

      // this.checkedNameList.findIndex(name => name === this.treeMap[id].pictureCategoryName) 不用此方法是防止重名导致删除出错
      // 控制名称插入与id插入一致，即可直接根据共同索引来删除
      this.checkedNameList.splice(checkedIndex, 1)
    }
  }
}

export { CatalogSort }

父组件

  • acss

    /* 目录树弹窗 */
.selectCatalogDialog_contentStyle {
flex: 1;
width: 750rpx;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 66;
flex-direction: column;
height: 100vh;
}

.selectCatalogDialog_Btn {
height: 114rpx;
background-color: #ffffff;
border-radius: 24rpx;
margin: 20rpx 25rpx 25rpx 25rpx;
justify-content: center;
display: flex;
align-items: center;
}

.selectCatalogDialog_Btn_txt {
font-size: 32rpx;
color: #3089dc;
text-align: center;
flex: 1;
line-height: 114rpx;
}

.comfirm-btn {
border-left: 1rpx solid #ddd;
}

.selectCatalogDialog_body {
position: relative;
border-radius: 24rpx;
background-color: #ffffff;
margin: 25rpx 25rpx 0 25rpx;
flex: 1;
overflow: hidden;
display: flex;
}

.catalog_list_row_refresh_block {
position: absolute;
top: 26rpx;
right: -30rpx;
z-index: 1;
flex: 1;
flex-direction: row;
justify-content:flex-end;
align-items: center;
display: flex;
}

.catalog_list_row_refresh_touch {
width: 150rpx;
flex-direction: row;
align-items: center;
display: flex;
}

.catalog_list_row_refresh_touch_text {
color: #3089dc;
}

  • axml

    <view class="selectCatalogDialog_contentStyle" style="left:{{show?\'0rpx\':\'-750rpx\'}}">
<scroll-view class="selectCatalogDialog_body" scroll-y="{{true}}">
  <block a:if="{{cataloglist}}">
    <view class="catalog_list_row_refresh_block">
      <view class="catalog_list_row_refresh_touch" onTap="refreshCategory">
        <image src="{{imgUrl+\'/imageOff/common/refresh.png\'}}" style="width:35rpx;height:35rpx"/> 
        <view class="catalog_list_row_refresh_touch_text">刷新</view>
      </view>
    </view>
    <tree-child a:for="{{cataloglist}}" catalog="{{item}}" level="{{0}}" onSelectCatalog="onSelectCatalog"></tree-child>
  </block>
</scroll-view>
<view class="selectCatalogDialog_Btn">
  <text onTap="hide" class="selectCatalogDialog_Btn_txt">取消</text>
  <text a:if="{{!isSingleChecked}}" onTap="confirm" class="selectCatalogDialog_Btn_txt comfirm-btn">确定</text>
</view>
</view>

  • js

    import PictureCatalogService from \'/pages/pictureSpace/public/PictureCatalogService.js\';
import { RyUrlConfigure } from \'../../js/together/RyUrlConfigure.js\'
import { CatalogSort } from \'../../js/together/catalogSort.js\'
const app = getApp();
Component({
mixins: [],
data: {
  imgUrl: RyUrlConfigure.getUrlImg(),
  cataloglist: null,
},
props: {
  show: false,
  isSingleChecked: false, // 是否单选 false-多选 true-单选
  historyChecked: [], // 已选中的列表
  onSelect: () => {},
  onClose: () => {},
},
didMount() {
  this.loadData()
  this.treeInstance = null // 树结构实例
},
didUpdate() {
  
},
didUnmount() {},
methods: {
  loadData(){
    PictureCatalogService.getCatalogTreeData().then((data) => {
      this.treeInstance = new CatalogSort(data, this.props.isSingleChecked, this.props.historyChecked)
      this.setData({
        cataloglist: this.treeInstance.tree
      })
    }).catch(err => {
      my.alert({ content: err })
    });
  },
  /**
   * 图片目录选择
   */
  onSelectCatalog(id) {
    this.treeInstance.selectNode(id)
    this.setData({
      cataloglist: this.treeInstance.tree
    }, () => {
      // 单选选中后直接将选中的值传递给父组件
      if (this.props.isSingleChecked) {
        this.props.onSelect(this.treeInstance.treeMap[this.treeInstance.checkedList[0]])
      }
    })
  },
  hide(){
    this.props.onClose()
  },
  /**
   * 多选时点击确定
   */
  confirm() {
    // 将选中的ids传递给父组件
    const { checkedList, checkedNameList, totalCount } = this.treeInstance
    if (checkedList.length === 0) {
      app.toast(\'请先选择目录\')
      return
    }
    const values = {
      checkedList,
      checkedNameList,
      totalCount,
    }
    this.props.onSelect(values)
  },
  refreshCategory(){
    PictureCatalogService.getCatalogTreeData(true).then(res=>{
      app.toast(\'刷新成功\')
      this.loadData()
    }).catch(err => {
      my.alert({ content: err })
    })
  }
},
});

  • json

    {
"component": true,
"usingComponents": {
  "check-box": "/common/components/ryCheckbox/index",
  "am-checkbox": "mini-ali-ui/es/am-checkbox/index",
  "tree-child": "/common/components/picCategoryTree/tree-child/tree-child"
}
}

    子组件(树递归渲染节点)

  • acss

    .catalog_list_row {
border-bottom: 1rpx solid #dddddd;
background-color: #ffffff;
height: 89rpx;
flex-direction: row;
align-items: center;
position: relative;
display: flex;
padding-left: 20rpx;
}

.catalog_list_row_select_block {
flex: 1;
flex-direction: row;
align-items: center;
display: flex;
}

.catalog_list_row_title {
font-size: 28rpx;
color: #333333;
margin-left: 20rpx;
}

.child_toggle_btn {
position: absolute;
height: 88rpx;
width: 78rpx;
justify-content: center;
align-items: center;
right: 0rpx;
top: 0rpx;
display: flex;
}

.child_toggle_btn_icon {
width: 38rpx;
height: 38rpx;
}

  • axml

    <view style="width: 100%;">
<view class="catalog_list_row">
  <view onTap="checkNode" data-id="{{catalog.pictureCategoryId}}" class="catalog_list_row_select_block" style="padding-left:{{level * 50}}rpx;">
    <check-box checked="{{catalog.checked}}" />
    <view class="catalog_list_row_title">{{catalog.pictureCategoryName}}</view>
  </view>
  <view onTap="toggleChild" class="child_toggle_btn" a:if="{{isBranch && catalog.pictureCategoryId !== \'0\'}}">
    <image class="child_toggle_btn_icon" src="{{ImgUrlPrefix + (open ? \'icon-fold.png\' : \'icon-unfold.png\')}}" />
  </view>
</view>
<view hidden="{{!open}}">
  <tree-child a:for="{{catalog.children}}" catalog="{{item}}" level="{{level + 1}}" onSelectCatalog="selectCatalog"></tree-child>
</view>
</view>

  • js

    import { RyUrlConfigure } from \'../../../js/together/RyUrlConfigure.js\'

Component({
mixins: [],
data: {
  imgUrl: RyUrlConfigure.getUrlImg(),
  ImgUrlPrefix: RyUrlConfigure.getUrlImg() + \'/imageOff/picture-space/\',
  open: false, // 是否展开
  isBranch: false, // 是否是父节点
},
props: {
  catalog: {}, // 树结构对象
  level: 0, // 层级
  onSelectCatalog: () => {},
},
didMount() {
  this.setData({
    isBranch: this.props.catalog.children.length > 0,
    open: this.props.level === 0,
  })
},
didUpdate() {},
didUnmount() {},
methods: {
  toggleChild() {
    this.setData({
      open: !this.data.open,
    })
  },
  checkNode({ target: { dataset: { id } } } = e) {
    this.selectCatalog(id)
  },
  selectCatalog(id) {
    this.props.onSelectCatalog(id)
  },
},
});

  • json

    {
"component": true,
"usingComponents": {
  "check-box": "/common/components/ryCheckbox/index",
  "tree-child": "/common/components/picCategoryTree/tree-child/tree-child"
}
}

    步骤解析

    一维数组转化为树结构

    因从接口中获取到的数据不是已经构造好了的树数据，而是一维数组，所以我们需要先将其转化为树结构。此处内容关键点在于构建父-子节点映射关系，方便后续节点的查找，大大减少了递归的调用。
    初始化遍历源数组，构建父-子关系时增加了默认的选中项，因全选的时候可能不会传所有的节点而只是传一个代表全选的字段，故此处会暂存一个初始化时是否全选的判断，以给每个子项增加checked（是否选中）状态项，totalCount值与勾选的数组长度值用于判断是否全选。
    正式构建树结构，遍历源数组，根据每一项的父节点id，利用前面刚构造好的父-子映射对象，给每一项对应的父节点填充相应的子节点项。最后利用filter返回第一层数据，即无父节点关系（此处为空）。

    目录排序

    目录排序利用递归给每一层数据进行数字、字母、中文排序，localeCompare在不同浏览器中兼容性不同，故这里先判断目录名是否为数字字母，是的话用sort先进行排序，否则再用localeCompare。

    树结构渲染

    树渲染用到了递归组件，所以需要拆分为父子两个组件来进行渲染，子组件主要是用于渲染每一个目录单项，然后递归子组件来渲染整棵树。
    父组件引入子组件时，声明一个level为0的属性表示层级，后续通过层级来指定子组件的padding-left值给予缩进，构建父子视觉关系。
    子组件用两个属性值操作展开收起，isBrand表示是否有子节点，open表示是否展开，通过level操控默认的展开层级；展开收起状态图标通过是否有子节点的方式进行展示（即isBrand属性）。因我的业务中第一层为一个父节点，不收起，故第一层不渲染展开收起图标。isOpen状态值用于判断是否隐藏子节点内容。这两个属性只针对节点本身，而不用初始化时给节点的每一项增加类似于checked的属性，非常方便事件操作，而不用再递归树结构数组。

    树节点选择

    节点选择包括单选、多选两方面，通过初始化树组件实例传isSingleChecked判断是否单选，传historyChecked表示默认选中项。选中节点时，selectNode方法，通过父-子节点映射查找到选中的节点。
    单选时，存储一下上一次的选中值（用于每一次单选将其checked置为false）以及本次的选择状态（是选中还是取消选中）；同时将选中的id存入checkedList数组（此处多存了一个name数组，为了业务需求），存储时如果是选中且不在选中数组中就push，如果是取消选中且在数组中就删除id。
    可以多选时，针对父-子选择的关系就更复杂，除了改变本身选中态外，也要对其子节点和父节点进行遍历选择。父子节点递归的过程中通过判断是否与当前节点态一致来跳出循环，减少递归次数。子节点选中直接递归children子数组即可；父节点选择通过父子映射列表查找父关系，再对父关系的子节点列表的checked属性进行判断，若都为true，则选中，否则为不选中状态。

    组件接收

    组件接收值主要是节点的选中ids数组，选中的节点名称数组，总长度。若后期有其他业务可在此扩展。

    结语

    以上就是关于树结构业务的所有思路。为了方便后期查看，在此记录。若其中有能帮助到别人的，非常开心。

以上是关于支付宝小程序树节点构建渲染单选多选等问题的处理的主要内容，如果未能解决你的问题，请参考以下文章

IT小鲜肉 Widgets Tree 单选多选相关回调函数获取选中的节点功能

checkbox的全选反选多选等操作（js）

iOS——UITableView单选模式，多选模式，单选多选混合模式

单选多选post值到控制器处理

Unity实战100例Unity万能答题系统之单选多选判断题全部通用

Android实现选择题答题（包括单选多选和答题卡）