微信小程序实现多层级复选框菜单

Tina ·

更新时间:2024-05-16

· 1448 次阅读

一、背景

二、效果展示

三、功能点

四、代码实现

五、最后

本文实例为大家分享了微信小程序自定义多层级复选框菜单的具体代码，供大家参考，具体内容如下

一、背景

因客户需要，有一个功能是需要注册用户时选择多个【单元 - 楼层 - 设备】的绑定，谷歌了一通，没有找到想要的，无奈之举只能手写一个…

二、效果展示

三、功能点

1、初始化时，默认展开选中的菜单
2、点击每一层父级菜单，会自动折叠其子菜单
3、选中子级节点会默认选中父级节点
4、子级节点都没选中默认取消选中父级节点
5、选中父级节点默认选中其所有子级节点

四、代码实现

这里没写组件，如果需要可以改为组件。
可能会有一个疑问为哈是 treeMenu2 不是 treeMenu1
因为 treeMenu1 写的low，treeMenu2 升级了js代码。

1、treeMenu2.js

js里面的各种事件均为递归操作，可根据加载的数据动态进行操作。

// pages/biz/treeMenu/treeMenu.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        menuTreeImgLeft: "../../../icon/f_left.png",
        menuTreeImgBottom: "../../../icon/f_bottom.png",
        menuTree: [{
            "checked": false,
            "children": [{
                "checked": false,
                "children": [{
                    "id": "1-1-1",
                    "checked": true,
                    "field": "1",
                    "title": "设备1",
                }, {
                    "id": "1-1-2",
                    "checked": false,
                    "field": "2",
                    "title": "设备2"
                }],
                "id": "1-1",
                "field": "1-floor",
                "title": "1楼",
                "isHidden": true,
                "bindAll": false,
            }, {
                "checked": false,
                "children": [{
                    "checked": false,
                    "field": "3",
                    "title": "设备3"
                }],
                "id": "1-2",
                "field": "2-floor",
                "title": "2楼",
                "isHidden": true,
            }, {
                "checked": false,
                "children": [{
                    "id": "1-3-4",
                    "checked": true,
                    "field": "4",
                    "title": "设备4"
                }],
                "id": "1-3",
                "field": "3-floor",
                "title": "3楼",
                "isHidden": true,
            }],
            "id": "1",
            "isHidden": true,
            "bindAll": false,
            "field": "1-unit",
            "title": "1单元"
        }, {
            "checked": false,
            "children": [{
                "checked": false,
                "children": [{
                    "id": "2-1-1",
                    "checked": false,
                    "field": "5",
                    "title": "设备5"
                }],
                "id": "2-1",
                "field": "1-floor",
                "title": "1楼",
                "isHidden": true,
            }, {
                "checked": false,
                "children": [{
                    "id": "2-2-1",
                    "checked": false,
                    "field": "6",
                    "title": "设备6"
                }],
                "id": "2-2",
                "field": "2-floor",
                "title": "2楼",
                "isHidden": true,
            }],
            "bindAll": false,
            "isHidden": true,
            "field": "2-unit",
            "title": "2单元",
            "id": "2",
        }],
        deepList: [],
        deepListOne: []
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.checkForChecked()
    },
    /**
     * 默认选中是否展开
     */
    checkForChecked() {
        var data = this.data.menuTree
        // 获取所有被选中的节点
        var checkedNodes = this.getDeep(data)
        // 获取所有选中节点的父节点
        checkedNodes.forEach(element => {
            var tmp = this.getParentsById(data, element.id)
            if (tmp != undefined && tmp.length > 0) {
                // 最后一级选中，默认展开和选中父级菜单
                tmp.forEach(element => {
                    element.isHidden = false
                    element.checked = true
                })
            }
        })
        this.setData({
            menuTree: data
        })
    },
    // 递归 - 根据id获取所有父节点
    getParentsById(list, id) {
        for (let i in list) {
            if (list[i].id == id) {
                return [list[i]]
            }
            if (list[i].children) {
                let node = this.getParentsById(list[i].children, id);
                if (node !== undefined) {
                    return node.concat(list[i])
                }
            }
        }
    },
    // 递归 - 根据id获取当前节点对象
    getNodeById(data, id, newNodes = []) {
        data.forEach(element => {
            // 匹配到节点
            if (element.id === id) {
                newNodes.push(element)
            }
            if (element.children) {
                this.getNodeById(element.children, id, newNodes)
            }
        })
        return newNodes;
    },
    // 递归 - 根据id获取所有子节点，（其实就是先获取当前id的节点对象，然后取当前对象,注意这里返回的是数组）
    getChildrenById(data, id, newNodes = []) {
        var list = data.children
        if (list != undefined) {
            list.forEach(element => {
                newNodes.push(element)
                if (element.children) {
                    this.getChildrenById(element, id, newNodes)
                }
            })
        }
        return newNodes;
    },
    // 递归 - 获取所有选中节点
    getDeep(data, newCheckedNodes = []) {
        data.forEach(element => {
            if (element.checked) {
                newCheckedNodes.push(element)
            }
            if (element.children) {
                this.getDeep(element.children, newCheckedNodes)
            }
        })
        return newCheckedNodes
    },
    // 递归 - 根据节点id获取兄弟所有节点
    getBrotherNodesById(list, id) {
        // 非顶级节点：获取节点父节点对象里的children
        var parentNodes = this.getParentsById(list, id)
        if (parentNodes && parentNodes.length >= 2) {
            return parentNodes[1].children
        }
        // 顶级节点：第一级是自己，从原始数组中遍历第一层即可
        return list
    },
    // 根据当前节点id，获取及所有的父级兄弟节点的所有父节点
    getParentBrotherAllNodesById(list, id) {
        var result = []
        // 1、获取当前节点id父节点的父节点
        var parentNodes = this.getParentsById(list, id)
        // 小于3表示当前父节点是顶级节点
        if (parentNodes.length < 3) {
            return parentNodes[parentNodes.length - 1]
        }
        var testNode = parentNodes[2];
        // 2、获取父节点的父节点所有兄弟节点
        var children = testNode.children
        children.forEach(element => {
            var parentNodesById = this.getParentsById(list, element.id)
            if (parentNodesById.length >= 2) {
                // js 数组中添加多个元素 简单的方法 push(...[])
                result.push(...(parentNodesById.slice(0, parentNodesById.length - 1)))
            }
        });
        return result;
    },
    /**
     * 点击事件 - 左侧绑定复选框事件
     */
    checkboxChangeBindAll(e) {
        var index = e.currentTarget.dataset.index;
        var index2 = e.currentTarget.dataset.index2;
        var list = this.data.menuTree
        if (index2 == undefined) {
            list[index].bindAll = !list[index].bindAll
        }
        if (index2 != undefined) {
            list[index].children[index2].bindAll = !list[index].children[index2].bindAll
        }
        console.log(this.data.menuTree);
    },
    checkboxChange(e) {
        // console.log(e);
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
        const values = e.detail.value
    },
    /**
     * 点击事件 - 右侧复选框事件
     */
    checkboxChangeAll(e) {
        var id = e.currentTarget.dataset.id;
        var data = this.data.menuTree
        var node = this.getNodeById(data, id)
        var childrenNodes = this.getChildrenById(node[0], id)
        // 1、子节点点选中状态-跟随父节点移动
        node[0].checked = !node[0].checked
        // 节点下面的所有子节点跟随父节点的选中状态
        childrenNodes.forEach(element => {
            element.checked = node[0].checked
        })
        // 2、父节点选中状态,子节点都没选中，父节点默认不选中，子节点有一个选中，父节点也选中
        // 获取同级兄弟节点
        var bortherNodes = this.getBrotherNodesById(data, id)
        // 3、同级都选中
        var allChecked = false
        bortherNodes.forEach(element => {
            if (element.checked) {
                allChecked = true
            }
        })
        // 获取节点id所有父节点
        var parentNodes = this.getParentsById(data, id)
        if (parentNodes.length > 1) {
            if (allChecked) {
                // 下标index=0的节点是其本身，这里跳过
                for (let index = 1; index < parentNodes.length; index++) {
                    const element = parentNodes[index];
                    element.checked = true
                }
            }else{
                parentNodes[1].checked =false
            }
        }
        // 4、同级都未选中
        if (!allChecked) {
            var allNoChecked = false
            //  根据当前节点id，获取除去顶级节点的所有的父级兄弟节点的所有父节点
            var parentBother = this.getParentBrotherAllNodesById(data, id)
            console.log(parentBother);
            if (parentBother.length > 1) {
                parentBother.forEach(element => {
                    if (element.checked) {
                        allNoChecked = true
                    }
                });
            }
            console.log(allNoChecked);
            // console.log(parentBother);
            if(!allNoChecked){
                parentNodes.forEach(element => {
                    element.checked=false
                });
            }
        }
        this.setData({
            menuTree: data
        })
        // console.log(this.data.menuTree);
    },
    /**
     * 点击事件 - 点击层级显示和折叠事件
     */
    openAndHide(e) {
        var id = e.currentTarget.dataset.id;
        var list = this.data.menuTree
        console.log(id);
        // 根据 id 获取选中节点的对象
        var node = this.getNodeById(list, id)
        // 根据 id 获取选中节点下的所有子节点
        var res = this.getChildrenById(node[0], id)
        // 包含当前id节点本身
        res.push(node[0])
        // 遍历选中节点（及自己）是否展开
        res.forEach(element => {
            element.isHidden = !element.isHidden
        })
        this.setData({
            menuTree: list
        })
    }
})

2、treeMenu2.JSON

{
  "usingComponents": {}
}

3、treeMenu2.WXMl

这里其实写的有问题，我主要写java的，前端用的不多，哪个高手指点一下，wxml 文件怎么样能递归呢，
我这里直接最笨的方法，三层for…，

<view class="divcss5-max">
  <view class="page-section ">
    <view style="padding-bottom:10px">设备选择列表：{{menuTree.length}}</view>
    <view class="weui-cells weui-cells_after-title "></view>
    <view>
      <!-- 第一层 -->
        <block class="weui-cell weui-check__label line-center" wx:for="{{menuTree}}" wx:for-index="index"
          wx:for-item="item" wx:key="id">
          <view class="paddingBottom_10 "></view>
          <view class="paddingLeft_10">
          <view class="treeMenuCenter">
            <checkbox-group bindchange="checkboxChangeAll" data-index="{{index}}" data-id="{{item.id}}" >
              <checkbox value="{{item.field}}"  checked="{{item.checked}}" />
              </checkbox-group>
            <!-- 箭头图标 -->
            <view class="treeMenuCenter"  bindtap="openAndHide" data-id="{{item.id}}" data-index="{{index}}"  >
            <image wx:if="{{item.isHidden == true}}"  class="icon-chioce" src="{{menuTreeImgLeft}}"></image>
            <image wx:if="{{item.isHidden == false}}"  class="icon-chioce" src="{{menuTreeImgBottom}}"></image>
            <text style="color:black" 
              decode="{{true}}">&nbsp;{{item.title}} &nbsp;</text>
              </view>
              <!-- <checkbox-group bindchange="checkboxChangeBindAll" data-index="{{index}}"  >
              <checkbox  checked="{{item.bindAll}}"   />绑定单元
              </checkbox-group> -->
          </view>
          </view>
          <!-- 第二层 -->
          <view class="" hidden="{{item.isHidden}}" wx:for="{{item.children}}" wx:for-index="index2" wx:for-item="item2"
            wx:key="id">
            <view class="paddingLeft_20 ">
            <view class="treeMenuCenter">
            <!-- <view class="dashedStyleWidth_40"></view> -->
            <checkbox-group bindchange="checkboxChangeAll" data-id="{{item2.id}}" data-index="{{index}}" data-index2="{{index2}}" >
            <checkbox value="{{item2.field}}" checked="{{item2.checked}}" />
            </checkbox-group>
              <!-- 箭头图标 -->
              <view class="treeMenuCenter"  bindtap="openAndHide"  data-id="{{item2.id}}"
               data-index="{{index}}" data-index2="{{index2}}" >
              <image wx:if="{{item2.isHidden == true}}" class="icon-chioce" src="{{menuTreeImgLeft}}"></image>
              <image wx:if="{{item2.isHidden == false}}"   class="icon-chioce" src="{{menuTreeImgBottom}}"></image>
              <text style="color:#0094aa"    decode="{{true}}">&nbsp; {{item2.title}}&nbsp; &nbsp;</text>
            </view>
              <!-- <checkbox-group bindchange="checkboxChangeBindAll" data-index="{{index}}" data-index2="{{index2}}" >
              <checkbox  checked="{{item2.bindAll}}"  />绑定楼层
              </checkbox-group> -->
            </view>
            </view>
            <!-- 第三层 -->
            <block class="" wx:for="{{item2.children}}" wx:for-item="item3"  wx:for-index="index3" wx:key="id">
              <view class="paddingLeft_30 " hidden="{{item2.isHidden}}">
                <!-- <view class="dashedStyleWidth_80"></view> -->
                <checkbox-group bindchange="checkboxChangeAll" data-id="{{item3.id}}"
                 data-index="{{index}}" data-index2="{{index2}}"  data-index3="{{index3}}" >
                <checkbox value="{{item3.field}}" checked="{{item3.checked}}" />
                {{item3.title}}
              </checkbox-group>
              </view>
            </block>
          </view>
          <view class="paddingBottom_10 "></view>
          <view class="weui-cells weui-cells_after-title "></view>
        </block>
    </view>
  </view>
</view>

4、treeMenu2.WXSS

/* pages/biz/treeMenu/treeMenu.wxss */
@import '../../../lib/weui.wxss';
.empty{
  padding: 5px 0px;
}
.paddingLeft_10{
  padding-left: 10px;
  padding-bottom: 5px;
}
.paddingLeft_20{
  padding-left: 40px;
  padding-bottom: 5px;
}
.paddingLeft_30{
  padding-left: 80px;
  padding-bottom: 5px;
}
.paddingBottom_10{
  padding-top: 10px;
}
.line-center{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
/**
*参考：https://cloud.tencent.com/developer/article/1690869
*
/
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */  
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #0094aa;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  color:#fff; /* 对勾颜色 白色 */
}
.treeMenuCenter{
  display: flex;
  align-items: center;
}
.dashedStyleWidth_80{
  margin-left: 10px;
  margin-right: 5px;
  width: 80px;
  height: 0px;
  border: 0.5px dotted gray;
}
.dashedStyleWidth_40{
  margin-left: 10px;
  margin-right: 5px;
  width: 40px;
  height: 0px;
  border: 0.5px dotted gray;
}
.icon-chioce {
  height: 15px;
  width: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: fff;
 }

五、最后

哪个大侠指点一下，wxml如何递归就完美了

微信小程序菜单程序复选框微信小程序

1024 个赞