微信小程序?qū)崿F(xiàn)多層級復選框菜單

更新時間：2022年07月18日 14:39:32 作者：十三月tlz

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)多層級復選框菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、背景

因客戶需要，有一個功能是需要注冊用戶時選擇多個【單元 - 樓層 - 設備】的綁定，谷歌了一通，沒有找到想要的，無奈之舉只能手寫一個…

二、效果展示

三、功能點

1、初始化時，默認展開選中的菜單
2、點擊每一層父級菜單，會自動折疊其子菜單
3、選中子級節(jié)點會默認選中父級節(jié)點
4、子級節(jié)點都沒選中默認取消選中父級節(jié)點
5、選中父級節(jié)點默認選中其所有子級節(jié)點

四、代碼實現(xiàn)

這里沒寫組件，如果需要可以改為組件。
可能會有一個疑問為哈是 treeMenu2 不是 treeMenu1
因為 treeMenu1 寫的low，treeMenu2 升級了js代碼。

1、treeMenu2.js

js里面的各種事件均為遞歸操作，可根據(jù)加載的數(shù)據(jù)動態(tài)進行操作。

// pages/biz/treeMenu/treeMenu.js
Page({

? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? 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: []
? ? },
? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ? ?*/
? ? onShow: function () {
? ? ? ? this.checkForChecked()
? ? },

? ? /**
? ? ?* 默認選中是否展開
? ? ?*/
? ? checkForChecked() {
? ? ? ? var data = this.data.menuTree

? ? ? ? // 獲取所有被選中的節(jié)點
? ? ? ? var checkedNodes = this.getDeep(data)
? ? ? ? // 獲取所有選中節(jié)點的父節(jié)點
? ? ? ? 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
? ? ? ? })
? ? },
? ? // 遞歸 - 根據(jù)id獲取所有父節(jié)點
? ? 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])
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? // 遞歸 - 根據(jù)id獲取當前節(jié)點對象
? ? getNodeById(data, id, newNodes = []) {
? ? ? ? data.forEach(element => {
? ? ? ? ? ? // 匹配到節(jié)點
? ? ? ? ? ? if (element.id === id) {
? ? ? ? ? ? ? ? newNodes.push(element)
? ? ? ? ? ? }
? ? ? ? ? ? if (element.children) {
? ? ? ? ? ? ? ? this.getNodeById(element.children, id, newNodes)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? return newNodes;
? ? },

? ? // 遞歸 - 根據(jù)id獲取所有子節(jié)點，（其實就是先獲取當前id的節(jié)點對象，然后取當前對象,注意這里返回的是數(shù)組）
? ? 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;
? ? },

? ? // 遞歸 - 獲取所有選中節(jié)點
? ? getDeep(data, newCheckedNodes = []) {
? ? ? ? data.forEach(element => {
? ? ? ? ? ? if (element.checked) {
? ? ? ? ? ? ? ? newCheckedNodes.push(element)
? ? ? ? ? ? }
? ? ? ? ? ? if (element.children) {
? ? ? ? ? ? ? ? this.getDeep(element.children, newCheckedNodes)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? return newCheckedNodes
? ? },

? ? // 遞歸 - 根據(jù)節(jié)點id獲取兄弟所有節(jié)點
? ? getBrotherNodesById(list, id) {
? ? ? ? // 非頂級節(jié)點：獲取節(jié)點父節(jié)點對象里的children
? ? ? ? var parentNodes = this.getParentsById(list, id)
? ? ? ? if (parentNodes && parentNodes.length >= 2) {
? ? ? ? ? ? return parentNodes[1].children
? ? ? ? }
? ? ? ? // 頂級節(jié)點：第一級是自己，從原始數(shù)組中遍歷第一層即可
? ? ? ? return list

? ? },

? ? // 根據(jù)當前節(jié)點id，獲取及所有的父級兄弟節(jié)點的所有父節(jié)點
? ? getParentBrotherAllNodesById(list, id) {
? ? ? ? var result = []
? ? ? ? // 1、獲取當前節(jié)點id父節(jié)點的父節(jié)點
? ? ? ? var parentNodes = this.getParentsById(list, id)

? ? ? ? // 小于3表示當前父節(jié)點是頂級節(jié)點
? ? ? ? if (parentNodes.length < 3) {
? ? ? ? ? ? return parentNodes[parentNodes.length - 1]
? ? ? ? }
? ? ? ? var testNode = parentNodes[2];
? ? ? ? // 2、獲取父節(jié)點的父節(jié)點所有兄弟節(jié)點
? ? ? ? var children = testNode.children
? ? ? ? children.forEach(element => {
? ? ? ? ? ? var parentNodesById = this.getParentsById(list, element.id)
? ? ? ? ? ? if (parentNodesById.length >= 2) {
? ? ? ? ? ? ? ? // js 數(shù)組中添加多個元素 簡單的方法 push(...[])
? ? ? ? ? ? ? ? result.push(...(parentNodesById.slice(0, parentNodesById.length - 1)))
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? return result;
? ? },

? ? /**
? ? ?* 點擊事件 - 左側(cè)綁定復選框事件
? ? ?*/
? ? 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發(fā)生change事件，攜帶value值為：', e.detail.value)
? ? ? ? const values = e.detail.value
? ? },


? ? /**
? ? ?* 點擊事件 - 右側(cè)復選框事件
? ? ?*/
? ? 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、子節(jié)點點選中狀態(tài)-跟隨父節(jié)點移動
? ? ? ? node[0].checked = !node[0].checked
? ? ? ? // 節(jié)點下面的所有子節(jié)點跟隨父節(jié)點的選中狀態(tài)
? ? ? ? childrenNodes.forEach(element => {
? ? ? ? ? ? element.checked = node[0].checked
? ? ? ? })

? ? ? ? // 2、父節(jié)點選中狀態(tài),子節(jié)點都沒選中，父節(jié)點默認不選中，子節(jié)點有一個選中，父節(jié)點也選中
? ? ? ? // 獲取同級兄弟節(jié)點
? ? ? ? var bortherNodes = this.getBrotherNodesById(data, id)

? ? ? ? // 3、同級都選中
? ? ? ? var allChecked = false
? ? ? ? bortherNodes.forEach(element => {
? ? ? ? ? ? if (element.checked) {
? ? ? ? ? ? ? ? allChecked = true
? ? ? ? ? ? }
? ? ? ? })

? ? ? ? // 獲取節(jié)點id所有父節(jié)點
? ? ? ? var parentNodes = this.getParentsById(data, id)
? ? ? ? if (parentNodes.length > 1) {
? ? ? ? ? ? if (allChecked) {
? ? ? ? ? ? ? ? // 下標index=0的節(jié)點是其本身，這里跳過
? ? ? ? ? ? ? ? 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
? ? ? ? ? ? // ?根據(jù)當前節(jié)點id，獲取除去頂級節(jié)點的所有的父級兄弟節(jié)點的所有父節(jié)點
? ? ? ? ? ? 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);
? ? ? ? // 根據(jù) id 獲取選中節(jié)點的對象
? ? ? ? var node = this.getNodeById(list, id)
? ? ? ? // 根據(jù) id 獲取選中節(jié)點下的所有子節(jié)點
? ? ? ? var res = this.getChildrenById(node[0], id)
? ? ? ? // 包含當前id節(jié)點本身
? ? ? ? res.push(node[0])

? ? ? ? // 遍歷選中節(jié)點（及自己）是否展開
? ? ? ? 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
*
/
/* 選中后的 背景樣式 （紅色背景 無邊框 可根據(jù)UI需求自己修改） */ ?
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
? background: #0094aa;
}
/* 選中后的 對勾樣式 （白色對勾 可根據(jù)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;
?}