微信小程序实现简单的树形选择控件------treeSelect - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序实现简单的树形选择控件------treeSelect

发表时间:2021-1-4

发布人:葵宇科技

浏览次数:633

前段时间公司突然要写小程序,项目中有一个树形控件。我找了很久的插件和框架。没有发现小程序能用的。只能硬着头皮自己写。

老规矩,先贴图

  • 为什么要特意强调此图标呢?
  • 因为该图标为中间状态。此处是我后期要优化的地方,在下面的代码中还未实现。我有了初步的思考。
    我的代码中设定(以网络部为例)
  • 0 该部门成员全部未选中
  • 1 该部门成员全部选中
  • -1 该部门成员至少选中一人切少于部门总人员数

好了,下面我们来实现树形结构的全选和零选中状态

  • 首先是树形组件的代码
    components文件夹下创建tree-select文件夹,选择新建component。命名为index

index.wxml文件

<view id="treeItem">
  <block wx:for="{
   
   {treeList}}" wx:key="deptId">
    <view  class="tree-item" style="margin-left: {
   
   {depth*40}}rpx" data-id="{
   
   {item.deptId}}" data-is-check="{
   
   {item.isCheck}}" catchtap="handleClick" >
      <!-- 全选 -->
      <view class="iconfont iconxuanzhong" wx:if="{
   
   {item.isCheck == 1}}" style="color: #007AFF" ></view>
      <!-- 未选中 -->
      <view class="iconfont iconweixuanzhong1" wx:if="{
   
   {item.isCheck == 0}}" style="color:#000" ></view>
    </view>
    <!-- children -->
    <view wx:if="{
   
   {item.children}}">
      <tree-select treeList="{
   
   {item.children}}" treeArray="{
   
   {treeArray}}" depth="{
   
   {depth+1}}" catchhandleClick="treeClick" id="treeItem"></tree-select>
    </view>
  </block>
</view>

树形组件主要用的就是递归。所以上面组件中我在组件中又调用组件自身。通过depth来判断层级关系,来实现数据的缩进。treeList为页面中传进来的人员数据,treeArrary为我清洗数据之后传过来的初始的人员选中状态的数组

index.json*

{
   
  "component": true,
  "usingComponenuts": {
   
    "tree-select": "/components/tree-select/index"
  }
}

此处要在usingComponenuts中引入组件自身

index.js

  /**
   * 组件的属性列表
   */
  properties: {
    treeList: {
      type: Array,
      value: []
    },
    depth: {
      type: Number,
      value: 0
    },
    treeArray: {
      type: Array,
      value: []
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    realTreeMap: new Map(),
  },

因为小程序页面中不能直接传递map对象给组件,所以我在组件中定义了map对象。他的主要作用是用来修正人员的真实选中状态。

 ready(){
    const {
      treeList,
      treeArray,
    } = this.properties;
    this.setData({
      treeList,
      treeArray,
    })
  },

此处,获取页面中传递过来的数据

    // 获取当前真实状态键值Map结构
    initRealTreeMap() {
      // 获取真实状态键值列表
      const {
   treeArray} = this.data
      // 生成真实状态键值Map结构
      var mRealTreeMap = new Map()
      treeArray.forEach(item => {
        mRealTreeMap.set(item.key, item.value);
      })
      // 给组件内部变量赋值真实状态Map结构
      this.setData({
        realTreeMap: mRealTreeMap
      })
    },

在这里插入图片描述

这里有一个要注意的就是,你点击某一项数据时,只能获取到与他同级的所有数据。比如:点击网络部,你拿到的数据就是 杨xx,马xx,营销部,网络部这四项数据

    handleClick(e){
   
   
      // 获取当前真实状态键值Map结构
      this.initRealTreeMap()

      // 获取当前的树形结构列表,真实状态键值列表,真实状态键值Map结构
      const {
   
    treeList, treeArray, realTreeMap } = this.data

      // 获取点击项id及其前一个状态
      const t = this.selectAllComponents('#treeItem');
      const {
   
    id, isCheck }  = e.currentTarget.dataset

      // 根据点击项id获取点击项及子节点id集合
      const idSet = new Set()
      this.getData(treeList, id, idSet)

      // 修改TreeList点击项及其子节点选中状态,但是,平级别的其他项及子项还是原始数据
      // this.setStatus(treeList, idSet, !isCheck)
      this.setStatus(treeList, idSet, !isCheck)


      // 修正TreeList除点击项及其子节点之外的其他平级及子节点项状态为真实状态
      this.repairTreeList(id, treeList)
      treeArray.forEach(item => {
   
   
        item.value = realTreeMap.get(item.key)
      })

      // 赋值给组件内部三大核心变量,树形结构列表,真实状态键值列表,真实状态键值Map结构
      this.setData({
   
   
        treeList,
        treeArray, 
        realTreeMap
      })
      // 触发向上通信传递事件,向父组件传递变量,主要为TreeList和TreeArray
      this.triggerEvent('handleClick', {
   
    id, isCheck, treeList, treeArray});
    },

因为treeList 所传递的数据为所选中的部门的平级数据,所以每次点击后之前操作的数据就会被重置为初始状态。所以用 repairTreeList来修正数据的真正状态

    // 【递归函数】由于TreeList递归传递渲染,导致平级非点击项数据为原始状态,此方法用于修正TreeList数据状态为真实状态,真实状态保存在treeArray及RealTreeMap中
    repairTreeList(id, treeList) {
   
   
      treeList.forEach(item => {
   
   
        item.isCheck = this.data.realTreeMap.get(item.deptId)
        if(this.hasValidChildren(item)) {
   
   
          this.repairTreeList(id, item.children)
        }
      })
    },
    // 父组件向子组件传值
    treeClick(e){
   
   
      // 接收子组件向上传递的变量
      const {
   
    id, isCheck, treeList, treeArray } = e.detail
      // 设置真实状态键值列表
      this.setData({
   
   
        treeArray
      })
      // 子组件内嵌套组件,循环向上触发通信传递事件,向父组件传递变量,主要为TreeArray
      this.triggerEvent('handleClick', {
   
    id, isCheck, treeList, treeArray });
    },

setStatus方法 将getData()方法返回的ids集合的id设为选中状态

    // 【递归函数】切换选中状态
    setStatus(dataTree, idSet, isCheck) {
   
   
      for (let i = 0; i < dataTree.length; i += 1) {
   
   
        // 遍历节点列表,若切换集合包含该节点,则切换选中状态
        if(idSet.has(dataTree[i].deptId)) {
   
   
          // 修正选中项状态
          this.resetCheckStatus(dataTree[i], isCheck)
          // 若当前节点的子节点列表不为空,则遍历子节点
          if (this.hasValidChildren(dataTree[i])) {
   
   
            let children = dataTree[i].children
            children.forEach( item => {
   
   
              // 若切换集合包含该节点,则切换子节点选中状态
              if(idSet.has(item.deptId)) {
   
   
                // 修正子节点选中状态
                this.resetCheckStatus(item, isCheck)
              }
              // 若子节点的子节点列表不为空,则递归调用切换选中状态
              if(this.hasValidChildren(item)) {
   
   
                this.setStatus(children, idSet, isCheck)
              }
            })
          }
        }
      }
    },
    // 修正选中项状态
    resetCheckStatus(item, isCheck) {
   
   
      // 修改TreeList里的数据,用于渲染
      item.isCheck = isCheck
      // 修改RealTreeMap里的数据,保存真实状态
      this.data.realTreeMap.set(item.deptId, isCheck)
      // 优化后放到修正RepairTreeList完成之后,防止重复遍历造成性能损耗
       修改treeArray里的数据,保存真实状态,用于组件间传值
      // treeArray.forEach(i => {
   
   
      //   i.value = http://www.wxapp-union.com/this.data.realTreeMap.get(i.key)
      // })
    },

getData方法实现的逻辑是当部门被选择时,他下面的部员都被选中,部门被取消选中时,部员也取消选中,并返回选中的人员的id集合

    // 【递归函数】获取点击项及其子节点项id集合,即切换集合
    getData(dataTree, id, idSet) {
   
   
      // 由于dataTree为id项的同级别列表,因此遍历同级别列表,匹配其中id项及其子节点
      for (let i = 0; i < dataTree.length; i += 1) {
   
   
        if (dataTree[i].deptId === id) {
   
   
            // id匹配,加入切换集合
            idSet.add(id)
            if (this.hasValidChildren(dataTree[i])) {
   
   
              // 存在子节点列表
              let children = dataTree[i].children
              // 遍历其子节点列表,将其子节点加入切换集合
              children.forEach(item=> {
   
   
                idSet.add(item.deptId)
                // 子节点存在子节点列表,则递归调用函数,获取其子节点的子节点列表及其包含项
                if(this.hasValidChildren(item)) {
   
   
                  // 注意,此处传递item及其同级别节点列表,而不是传递其子节点列表
                  this.getData(children, item.deptId, idSet);
                }
              })
            }
        }
      }
      return idSet
    },

此方法用来判断数据的children不为空

    // 判断对象是否存在有效的子节点列表
    hasValidChildren(item) {
   
   
      return item.children != undefined && item.children.length > 0
    },
  • 下面为引入组件的页面中的代码
  • wxml页面
<tree-select treeList='{
   
   {treeData}}' treeArray='{
   
   {treeArray}}' catchhandleClick="treeClick" depth="{
   
   {0}}" id="treeItem"></tree-select>
  • js页面
 // 将树形列表结构转化为一级列表结构,传递进入组件中,便于遍历、比较和赋值
  getTreeKeyValueArray(data, mTreeArray) {
data.forEach(item => { mTreeArray.unshift({ 'key': item.deptId, 'value': item.isCheck }) // 若存在子节点列表,则递归处理数据 if(this.hasValidChildren(item)) { this.getTreeKeyValueArray(item.children, mTreeArray) } }) },
  treeClick(e){

    // 接收子组件向上传递的变量
    const {
   
    id, isCheck, treeList, treeArray } = e.detail
    // 更新设置树形结构列表及真实状态键值列表
    this.setData({
treeList, treeArray }) this.getCheckedIds(treeArray) },
到此,这个组件就全部完成了。

相关案例查看更多