首先说一下思路，每一级菜单都需要他自己唯一的id和父级菜单id，并且每一个选项需要有自己独立的标识来控制它的选中和取消，还需要有一个独立的标识来控制他的显示和隐藏，由于微信原生的表单组件无法添加id，我使用了view自己来画，写起来感觉比原生的好用多了。这里吐槽两句，微信小程序封装了很多组件，用起来非常方便，但是由于封装的比较死有时候在实际工作场景中没办法按我们的要求实现业务逻辑，还是要根据情况来定，尤其是需要操作dom的时候，建议使用view自己添加"data-属性名"来完成业务。
如何做到上下级联动，当你选择的菜单有子元素时，比如我选择了全校，那么全校下所有的院系、专业、班级都要和全校菜单的状态一致。如你选择的菜单既有子元素又有父元素，那么你首先应该把他子元素的状态设为当前选择菜单的状态，然后还要根据当前菜单所有同级元素的状态判断他的父级菜单的状态。
数据需要按菜单的等级来封装成数组，也就是第一级菜单为一个数组，第二级菜单为一个数组，有几级菜单就对应的有几个数组。当然，你也可以把这几个数组再封装到一个数组中或者对象中。需要注意的是，在从数据库中取数据时最好把他的父级菜单的id也带上，比如要查询所有的专业就需要把他所在的系的id（主键，以下所有从数据库中取出数据的id最好都为主键）带上，再取所有班级的时候需要把他所在的专业id也带上。这里为了方便我在查班级列表的时候把专业id和系id都带上了。
下面是数据库表结构
院系表
专业表
年级表
班级表
查询所有院系信息(checked、show、open、count稍后介绍)
select
t.`FACULTY_ID` facultyId,t.`FACULTY_NAME` facultyName,
'0' checked,'0' `show`,'0' `open`,
(SELECT COUNT(1) FROM major_info mi WHERE mi.`FACULTY_ID`=t.`FACULTY_ID`) `count`
from
faculty_info t
查询所有专业信息
select
t.`MAJOR_ID` majorId,t.`MAJOR_NAME` majorName
,t.`FACULTY_ID` facultyId,'0' checked,'0' `show`,'0' `open`,
(SELECT COUNT(1) FROM class_info ci WHERE ci.`MAJOR_ID`=t.`MAJOR_ID`) `count`
from major_info t
查询所有班级信息
SELECT t.CLASS_ID classId,
CONCAT(P.GRADE_NAME,'级',T.CLASS_NAME) className,
t.`MAJOR_ID` majorId,f.`FACULTY_ID` facultyId,'0' checked,'0' `show`
FROM faculty_info f
LEFT JOIN major_info m ON f.`FACULTY_ID`=m.`FACULTY_ID`
LEFT JOIN class_info t ON t.`MAJOR_ID`=m.`MAJOR_ID`
LEFT JOIN grade_info p ON p.`GRADE_ID`=t.`GRADE_ID`
这里有几个字段需要说明一下
- checked：用于标识该选项是否为选中状态,1为选中，0为非选中
- show：用于标识该选项显示或隐藏，1为显示，0为隐藏
- open：用于控制该选项后面按钮是“+”或“-”，1为+，0为-
- count：用于记录他的下一级菜单中选项的个数，控制是否显示“+”或“-”
注意：这里所有的数据都是json格式的
数据得到了以后，开始画页面渲染数据
wxml文件，我给所有的选项都加了一个data-type，用于区分点击的是哪一级菜单。感觉还可以再优化一下，重复的代码比较多。
<view class="allSchool">
<view bindtap="checkboxChange" data-parentId="1" class="schoolName" data-id="1" data-type="s">
<image class='select_icon' src="{{schoolChecked ?'img/selected.png':'img/unselected.png'}}"></image>
<text class='text'>全校</text>
</view>
<view class="openSchool" bindtap="openSchool">{{schoolShow ? '-':'+' }}</view>
</view>
<view class="faculty-view" wx:if="{{facult.show=='1'}}" wx:for-item="facult" wx:for="{{facultyInfoList}}" wx:key="facultyId" data-id="{{facult.facultyId}}">
<view bindtap="checkboxChange" data-parentId="{{facult.setId}}" class="facultyName" data-id="{{facult.facultyId}}" data-type="f">
<image class='select_icon' src="{{facult.checked=='1' ?'img/selected.png':'img/unselected.png'}}"></image>
<text class='text'>{{facult.facultyName}}</text>
</view>
<view wx:if="{{facult.count>0}}" data-id="{{facult.facultyId}}" class="openFaculty" bindtap="openFaculty">{{facult.open=='1' ? '-' : '+'}}</view>
<view class="major-view" wx:key="majorId" wx:for-item="major" wx:for="{{majorInfoList}}" wx:if="{{major.facultyId==facult.facultyId & major.show=='1'}}" data-id="{{major.majorId}}">
<view data-type="m" bindtap="checkboxChange" data-parentId="{{major.facultyId}}" data-id="{{major.majorId}}" class="majorName">
<image class='select_icon' src="{{major.checked=='1' ?'img/selected.png':'img/unselected.png'}}"></image>
<text class='text'>{{major.majorName}}</text>
</view>
<view wx:if="{{major.count>0}}" data-id="{{major.majorId}}" class="openMajor" bindtap="openMajor">{{major.open=='1' ? '-' : '+'}}</view>
<view class="class-view" wx:for-item="class" wx:for="{{classInfoList}}" wx:if="{{class.majorId==major.majorId & class.show=='1'}}" wx:key="classId">
<view data-type="c" bindtap="checkboxChange" class="className" data-parentId="{{class.majorId}}" data-id="{{class.classId}}">
<image class='select_icon' src="{{class.checked=='1' ?'img/selected.png':'img/unselected.png'}}"></image>
<text class='text'>{{class.className}}</text>
</view>
</view>
</view>
</view>
js文件
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
schoolChecked: false,//全校按钮是否为选中的标识位
schoolShow: false,//全校后面‘+’和‘-’控制的标志位
//院系列表
facultyInfoList: [{
"facultyId": "402836e64f69e44e014f6f01203b000d",
"show": "0",
"count": 2,
"checked": "0",
"setId": 1,
"facultyName": "机械工程系",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"show": "0",
"count": 4,
"checked": "0",
"setId": 1,
"facultyName": "经济管理系",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120b3000f",
"show": "0",
"count": 4,
"checked": "0",
"setId": 1,
"facultyName": "信息与自动化系",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"show": "0",
"count": 6,
"checked": "0",
"setId": 1,
"facultyName": "资源开发系",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"show": "0",
"count": 6,
"checked": "0",
"setId": 1,
"facultyName": "矿冶工程系",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"show": "0",
"count": 6,
"checked": "0",
"setId": 1,
"facultyName": "机电工程系",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"show": "0",
"count": 6,
"checked": "0",
"setId": 1,
"facultyName": "汽车工程系",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fc3100001c",
"show": "0",
"count": 3,
"checked": "0",
"setId": 1,
"facultyName": "信息工程系",
"open": "0"
}, {
"facultyId": "8a92a347697ae02701697b49e60b0003",
"show": "0",
"count": 0,
"checked": "0",
"setId": 1,
"facultyName": "教管系",
"open": "0"
}],
//专业信息
majorInfoList:[{
"facultyId": "402836e64f69e44e014f6f01203b000d",
"majorId": "402836e64f69e44e014f6f0120f60012",
"show": "0",
"count": 5,
"checked": "0",
"majorName": "焊接技术及自动化",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"majorId": "402836e64f69e44e014f6f01211b0013",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "汽车检测与维修技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"majorId": "402836e64f69e44e014f6f01212c0014",
"show": "0",
"count": 1,
"checked": "0",
"majorName": "汽车营销与维修",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"majorId": "402836e64f69e44e014f6f0121590015",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "数控技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"majorId": "402836e64f69e44e014f6f0121690016",
"show": "0",
"count": 1,
"checked": "0",
"majorName": "数控设备应用与维护",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"majorId": "402836e64f69e44e014f6f0121780017",
"show": "0",
"count": 1,
"checked": "0",
"majorName": "会计",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"majorId": "402836e64f69e44e014f6f0121890018",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "建设工程管理",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120b3000f",
"majorId": "402836e64f69e44e014f6f0121980019",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "机电一体化技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120b3000f",
"majorId": "402836e64f69e44e014f6f0121a8001a",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "计算机应用技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120b3000f",
"majorId": "402836e64f69e44e014f6f0121b8001b",
"show": "0",
"count": 1,
"checked": "0",
"majorName": "选矿机电技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120c50010",
"majorId": "402836e64f69e44e014f6f0121c8001c",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "工业分析与检验",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120c50010",
"majorId": "402836e64f69e44e014f6f0121d8001d",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "冶金技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120c50010",
"majorId": "402836e64f69e44e014f6f0121ea001e",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "应用化工技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"majorId": "402836e64f69e44e014f6f01224d001f",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "工程测量技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"majorId": "402836e64f69e44e014f6f01225d0020",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "金属矿开采技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"majorId": "402836e64f69e44e014f6f01226d0021",
"show": "0",
"count": 1,
"checked": "0",
"majorName": "矿物加工技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"majorId": "402836e64f69e44e014f6f01227e0022",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "选矿技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"majorId": "402836e6562128db01569c7a82590033",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "工业机器人技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"majorId": "402836e6562128db01569c7b5a3f0034",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "焊接技术与自动化",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"majorId": "402836e6562128db01569c7badec0035",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "机电一体化技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"majorId": "402836e6562128db01569c7be5750036",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "矿业装备维护技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"majorId": "402836e6562128db01569c7c231c0037",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "数控技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fb5a19001a",
"majorId": "402836e6562128db01569c7c63c00038",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "数控设备应用与维护",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"majorId": "402836e6562128db01569c7ca6240039",
"show": "0",
"count": 3,
"checked": "0",
"majorName": "工程造价",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"majorId": "402836e6562128db01569c7dd446003c",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "工程测量技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"majorId": "402836e6562128db01569c7e05fc003d",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "工业分析技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"majorId": "402836e6562128db01569c7e31bd003e",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "金属与非金属矿开采技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"majorId": "402836e6562128db01569c7e710a003f",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "矿物加工技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"majorId": "402836e6562128db01569c7ea6990040",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "应用化工技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fa95ed0019",
"majorId": "402836e6562128db01569c7ed9e00041",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "有色冶金技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"majorId": "402836e6562128db01569c7f0e250042",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "汽车检测与维修技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"majorId": "402836e6562128db01569c7f44260043",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "汽车营销与服务",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fc3100001c",
"majorId": "402836e6562128db01569c7f81ff0044",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "计算机应用技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fc3100001c",
"majorId": "402836e6562128db01569c7fab7a0045",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "物联网工程技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fbca27001b",
"majorId": "402836e65e2cff83015e30ea08170000",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "新能源汽车运用与维修",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"majorId": "402836e65e2cff83015e30ea58490001",
"show": "0",
"count": 3,
"checked": "0",
"majorName": "高速铁路客运乘务",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120b3000f",
"majorId": "402836e65e2cff83015e30eaa5cc0002",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "计算机网络技术",
"open": "0"
}, {
"facultyId": "402836e6562128db015697fc3100001c",
"majorId": "402836e65e2cff83015e30eafdda0003",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "数字媒体应用技术",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"majorId": "8a92a347697b754601697b8e81cd0002",
"show": "0",
"count": 0,
"checked": "0",
"majorName": "环境工程",
"open": "0"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"majorId": "8a9bfac46a66a546016a66c286e20000",
"show": "0",
"count": 1,
"checked": "0",
"majorName": "地质勘探",
"open": "0"
}],
//班级信息
classInfoList: [{
"facultyId": "402836e6562128db015697fbca27001b",
"classId": "40285981698f723c0169900eadcd0026",
"majorId": "402836e64f69e44e014f6f01212c0014",
"show": "0",
"checked": "0",
"fullName": "汽车工程系汽车营销与维修2019级1",
"className": "2019级1"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"classId": "402859816a42c451016a42cfdb670000",
"majorId": "402836e64f69e44e014f6f0120f60012",
"show": "0",
"checked": "0",
"fullName": "机械工程系焊接技术及自动化2018级2018测试",
"className": "2018级2018测试"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "402859816a42c451016a43b2c50b0009",
"majorId": "402836e65e2cff83015e30ea58490001",
"show": "0",
"checked": "0",
"fullName": "经济管理系高速铁路客运乘务2019级一班",
"className": "2019级一班"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "402859816a42c451016a43caf6be0010",
"majorId": "402836e65e2cff83015e30ea58490001",
"show": "0",
"checked": "0",
"fullName": "经济管理系高速铁路客运乘务2019级四班",
"className": "2019级四班"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "402859816a42c451016a43d7db310017",
"majorId": "402836e65e2cff83015e30ea58490001",
"show": "0",
"checked": "0",
"fullName": "经济管理系高速铁路客运乘务2018级2018一班",
"className": "2018级2018一班"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "402859816a42c451016a44557379001e",
"majorId": "402836e64f69e44e014f6f0121780017",
"show": "0",
"checked": "0",
"fullName": "经济管理系会计2019级一班",
"className": "2019级一班"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"classId": "402859816a42c451016a4457c8500027",
"majorId": "402836e64f69e44e014f6f01226d0021",
"show": "0",
"checked": "0",
"fullName": "资源开发系矿物加工技术2018级一班",
"className": "2018级一班"
}, {
"facultyId": "402836e64f69e44e014f6f0120b3000f",
"classId": "4028f98169fadf440169faf1e5630005",
"majorId": "402836e64f69e44e014f6f0121b8001b",
"show": "0",
"checked": "0",
"fullName": "信息与自动化系选矿机电技术2012级测试删除2班",
"className": "2012级测试删除2班"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"classId": "4028f9816a872bc0016a8759cb2e0001",
"majorId": "402836e64f69e44e014f6f0120f60012",
"show": "0",
"checked": "0",
"fullName": "机械工程系焊接技术及自动化2019级2班",
"className": "2019级2班"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"classId": "4028f9816b405d66016b408268e50000",
"majorId": "402836e64f69e44e014f6f0121690016",
"show": "0",
"checked": "0",
"fullName": "机械工程系数控设备应用与维护2019级1班",
"className": "2019级1班"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"classId": "8a92a3bf68fa83630168fa98fcf60003",
"majorId": "402836e64f69e44e014f6f0120f60012",
"show": "0",
"checked": "0",
"fullName": "机械工程系焊接技术及自动化2019级0000",
"className": "2019级0000"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"classId": "8a92a3bf693865600169386b7f230000",
"majorId": "402836e64f69e44e014f6f0120f60012",
"show": "0",
"checked": "0",
"fullName": "机械工程系焊接技术及自动化2019级1班",
"className": "2019级1班"
}, {
"facultyId": "402836e64f69e44e014f6f01203b000d",
"classId": "8a92a3bf694b980901694ba1ee210002",
"majorId": "402836e64f69e44e014f6f0120f60012",
"show": "0",
"checked": "0",
"fullName": "机械工程系焊接技术及自动化2019级192班",
"className": "2019级192班"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "8a92a3bf697a2b1401697a2c910d0001",
"majorId": "402836e6562128db01569c7ca6240039",
"show": "0",
"checked": "0",
"fullName": "经济管理系工程造价2017级1班",
"className": "2017级1班"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "8a92a3bf697a2d9001697a2e95b00001",
"majorId": "402836e6562128db01569c7ca6240039",
"show": "0",
"checked": "0",
"fullName": "经济管理系工程造价2018级1班",
"className": "2018级1班"
}, {
"facultyId": "402836e64f69e44e014f6f0120a5000e",
"classId": "8a92a3bf697a366201697a3787e80001",
"majorId": "402836e6562128db01569c7ca6240039",
"show": "0",
"checked": "0",
"fullName": "经济管理系工程造价2019级1班",
"className": "2019级1班"
}, {
"facultyId": "402836e64f69e44e014f6f0120d50011",
"classId": "8a9bfac46a66a546016a66c287060001",
"majorId": "8a9bfac46a66a546016a66c286e20000",
"show": "0",
"checked": "0",
"fullName": "资源开发系地质勘探2019级1班",
"className": "2019级1班"
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this;//wx.request({})中无法使用this需要重新声明新的变量
//从缓存中获取班级列表
let classInfoListStorage = wx.getStorageSync('classInfoList');
//判断是否为第一次选班级
if (classInfoListStorage != '') { //非第一次，从缓存获取信息
that.setData({
facultyInfoList: wx.getStorageSync('facultyInfoList'),
majorInfoList: wx.getStorageSync('majorInfoList'),
classInfoList: classInfoListStorage,
schoolChecked: wx.getStorageSync('schoolChecked')
})
} else { //第一次
//获取所有院系，从后台查询
}
},
//勾选事件
checkboxChange: function(e) {
let id = e.currentTarget.dataset.id;//获被选中元素的id
let parentId = e.currentTarget.dataset.parentid;//获被选中元素的父级id
let type = e.currentTarget.dataset.type;获被选中元素的类型
console.log("id:" + id + ",parentId:" + parentId + ",type:" + type);
let majorInfoList = this.data.majorInfoList;//从data中获取专业信息
let facultyInfoList = this.data.facultyInfoList;//从data中获取院系信息
let classInfoList = this.data.classInfoList;//从data中获取班级信息
let schoolChecked = this.data.schoolChecked;//从data中获取全校信息
switch (type) { //根据type判断按下按钮的类型，s为全校，f为院系，m为专业，c为班级
case 's':
//按下全校按钮，他下面的所有菜单的状态和他的状态相同
schoolChecked = !schoolChecked;//改变自己的状态
//修改所有院系的状态
for (let i = 0, length = facultyInfoList.length; i < length; i++) {
facultyInfoList[i].checked = schoolChecked ? '1' : '0';
}
//修改所有专业的状态
for (let i = 0, length = majorInfoList.length; i < length; i++) {
majorInfoList[i].checked = schoolChecked ? '1' : '0';
}
//修改所有班级的状态
for (let i = 0, length = classInfoList.length; i < length; i++) {
classInfoList[i].checked = schoolChecked ? '1' : '0';
}
break;
case 'f':
//按下院系按钮
let tempFacultyChecked = '';//用于暂时存储院系按钮的状态
//设置当前院系状态，遍历集合找到集合中院系id与当前按钮id一直的元素，修改他的checked
for (let j = 0, length1 = facultyInfoList.length; j < length1; j++) {
if (facultyInfoList[j].facultyId == id) {
facultyInfoList[j].checked = facultyInfoList[j].checked == '1' ? '0' : '1';
tempFacultyChecked = facultyInfoList[j].checked;
break;
}
}
//设置他下面的所有专业的状态与该院系一致
for (let j = 0, length2 = majorInfoList.length; j < length2; j++) {//遍历专业列表
if (majorInfoList[j].facultyId == id) {//找到专业的院系id和当前按钮的id相同的专业按钮，修改他的状态
majorInfoList[j].checked = tempFacultyChecked;
}
}
//设置所有属于该院系下班级的状态与该院系一致
for (let j = 0, length3 = classInfoList.length; j < length3; j++) {//遍历班级列表
if (classInfoList[j].facultyId == id) {//找到班级的院系id和当前按钮的id相同的班级按钮，修改他的状态
classInfoList[j].checked = tempFacultyChecked;
}
}
//如果该按钮的状态为非选中，则设置父级菜单(全校)为非选中。否则(该菜单状态为选中)，查看所有院系的状态，如果所有院系的状态都为选中，修改父级(全校)的状态为选中。
if (tempFacultyChecked == '1') {//该院系为选中状态
let count = facultyInfoList.length;//获取院系列表的长度，用于判断是否所有院系都为选中状态
let checkedCount = 0;//用于记录选中状态院系的个数
for (let j = 0, count = facultyInfoList.length; j < count; j++) {//遍历院系列表，如果该院系为选中状态则checkedCount 加1，否则不变
checkedCount = facultyInfoList[j].checked == '1' ? checkedCount + 1 : checkedCount;
}
schoolChecked = checkedCount == count ? true : false;//根据checkedCount和count个数来确定全校按钮的选中状态
} else {//该院系为非选中状态
schoolChecked = false;
}
break;
case 'm':
//按下专业按钮
let tempMajorChecked = '';//用于暂时存储专业按钮的状态
//设置当前专业的状态，还是去遍历专业数组，然后根据专业id找到当前的专业并修改状态
for (let j = 0, length2 = majorInfoList.length; j < length2; j++) {
if (majorInfoList[j].majorId == id) {
majorInfoList[j].checked = majorInfoList[j].checked == '1' ? '0' : '1';
tempMajorChecked = majorInfoList[j].checked;
break;
}
}
//设置该专业下的班级和该专业的状态一致
for (let h = 0, length3 = classInfoList.length; h < length3; h++) {
if (classInfoList[h].majorId == id) {
classInfoList[h].checked = tempMajorChecked;
}
}
//查看专业所在院系状态，并根据院系下所有专业的状态修改院系状态
for (let j = 0, length3 = facultyInfoList.length; j < length3; j++) {
if (facultyInfoList[j].facultyId == parentId) { //找到该专业所在的院系
if (tempMajorChecked == '0') { //若该专业的状态为非选中则将该院系的状态设置为非选中
facultyInfoList[j].checked = '0';
} else { //若该专业的状态为选中则判断该专业所在院系的所有专业是否都为选中状态，若为选中状态，则设置该院系状态为选中否则为非选中
let count = 0;//记录专业总数
let checkedCount = 0;//记录被选中的专业总数
for (let i = 0, length = majorInfoList.length; i < length; i++) {//遍历专业列表
if (majorInfoList[i].facultyId == parentId) {//找到当前选中的院系下的专业，如果该专业为选中状态则checkedCount 加1，否则不变
count++;
checkedCount = majorInfoList[i].checked == '1' ? checkedCount + 1 : checkedCount;
}
}
facultyInfoList[j].checked = count == checkedCount ? '1' : '0';//根据checkedCount和count个数来确定当前专业所在院系按钮的选中状态
}
break;
}
}
//设置全校，同样根据当前专业的选中状态分类
if (tempMajorChecked == '0') {//状态为非选中，直接设置全校状态为非选中
schoolChecked = false;
} else {//状态为选中，查询所有院系状态，根据所有院系状态修改全校按钮的状态
let count = facultyInfoList.length;
let checkedCount = 0;
for (let j = 0, count = facultyInfoList.length; j < count; j++) {
checkedCount = facultyInfoList[j].checked == '1' ? checkedCount + 1 : checkedCount;
}
schoolChecked = checkedCount == count ? true : false;
}
break;
case 'c':
//按下班级菜单按钮
let tempClassChecked = '';//记录当前班级菜单的状态
let tempFacultyId = '';//记录当前班级菜单所在院系
//设置当前班级状态
for (let h = 0, length3 = classInfoList.length; h < length3; h++) {
if (classInfoList[h].classId == id) {
classInfoList[h].checked = classInfoList[h].checked == '1' ? '0' : '1';
tempClassChecked = classInfoList[h].checked;
break;
}
}
//查看该班所在专业状态，并根据专业下所有班级的状态修改专业状态
for (let j = 0, length2 = majorInfoList.length; j < length2; j++) {
if (majorInfoList[j].majorId == parentId) {
tempFacultyId = majorInfoList[j].facultyId;
let tempMajorId = majorInfoList[j].majorId;
if (tempClassChecked == '0') {
majorInfoList[j].checked = '0';
} else {
let count = 0;
let checkedCount = 0;
for (let h = 0, length = classInfoList.length; h < length; h++) {
if (classInfoList[h].majorId == tempMajorId) {
count++;
checkedCount = classInfoList[h].checked == '1' ? checkedCount + 1 : checkedCount;
}
}
majorInfoList[j].checked = checkedCount == count ? '1' : '0';
console.log("checkedCountM:" + checkedCount + ",countM:" + count);
}
break;
}
}
//查看该班所在院系状态，并根据院系下所有专业的状态修改院系状态
for (let j = 0, length2 = facultyInfoList.length; j < length2; j++) {
if (facultyInfoList[j].facultyId == tempFacultyId) {
if (tempClassChecked == '0') {
facultyInfoList[j].checked = '0';
} else { //判断该班所在院系下，所有的专业是否都为选定，若都为选定则设置该院为选定
let count = 0;
let checkedCount = 0;
for (let i = 0, length = majorInfoList.length; i < length; i++) {
if (tempFacultyId == majorInfoList[i].facultyId) {
count++;
checkedCount = majorInfoList[i].checked == '1' ? checkedCount + 1 : checkedCount;
}
}
facultyInfoList[j].checked = checkedCount == count ? '1' : '0';
console.log("checkedCountM:" + checkedCount + ",countM:" + count);
}
break;
}
}
//设置全校
if (tempClassChecked == '0') {
schoolChecked = false;
} else {
let count = facultyInfoList.length;
let checkedCount = 0;
for (let j = 0, count = facultyInfoList.length; j < count; j++) {
checkedCount = facultyInfoList[j].checked == '1' ? checkedCount + 1 : checkedCount;
}
schoolChecked = checkedCount == count ? true : false;
}
break;
default:
break;
}
//用修改后的数组覆盖之前的数组
this.setData({
majorInfoList: majorInfoList,
facultyInfoList: facultyInfoList,
classInfoList: classInfoList,
schoolChecked: schoolChecked
})
},
//展开或收起学校，获取他的下一级菜单列表，并修改该列表中所有元素的显示隐藏和当前元素后面的+、-
openSchool(e) {
let facultyInfoList = this.data.facultyInfoList;
let schoolShow = this.data.schoolShow;
for (let i = 0, length = facultyInfoList.length; i < length; i++) {
facultyInfoList[i].show = facultyInfoList[i].show == '1' ? '0' : '1';
}
this.setData({
facultyInfoList: facultyInfoList,
schoolShow: !schoolShow
})
},
//展开或收起院系
openFaculty(e) {
let facultyId = e.target.dataset.id;
let majorInfoList = this.data.majorInfoList;
let facultyInfoList = this.data.facultyInfoList;
for (let i = 0, length = facultyInfoList.length; i < length; i++) {
if (facultyId == facultyInfoList[i].facultyId) {
facultyInfoList[i].open = facultyInfoList[i].open == '1' ? '0' : '1';
}
}
for (let i = 0, length = majorInfoList.length; i < length; i++) {
if (facultyId == majorInfoList[i].facultyId) {
majorInfoList[i].show = majorInfoList[i].show == '1' ? '0' : '1';
}
}
this.setData({
majorInfoList: majorInfoList,
facultyInfoList: facultyInfoList
})
},
//展开或收起专业
openMajor(e) {
let majorId = e.target.dataset.id;
let classInfoList = this.data.classInfoList;
let majorInfoList = this.data.majorInfoList;
for (let i = 0, length = majorInfoList.length; i < length; i++) {
if (majorId == majorInfoList[i].majorId) {
majorInfoList[i].open = majorInfoList[i].open == '1' ? '0' : '1';
}
}
for (let i = 0, length = classInfoList.length; i < length; i++) {
if (majorId == classInfoList[i].majorId) {
classInfoList[i].show = classInfoList[i].show == '1' ? '0' : '1';
}
}
this.setData({
classInfoList: classInfoList,
majorInfoList: majorInfoList
})
},
//得到班级信息并跳转到发起签到页面
toBeginSign() {
let schoolChecked = this.data.schoolChecked;
let classInfoList = this.data.classInfoList;
let facultyInfoList = this.data.facultyInfoList;
let majorInfoList = this.data.majorInfoList;
let classNameArr = "";
let classIdArr = "";
for (let i = 0, length = classInfoList.length; i < length; i++) {
if (classInfoList[i].checked == '1') {
if (classInfoList[i].fullName.substring(classInfoList[i].fullName.length - 1, classInfoList[i].fullName.length) == '班') {
classNameArr += classInfoList[i].fullName + ";";
} else {
classNameArr += classInfoList[i].fullName + '班;';
}
classIdArr += classInfoList[i].classId + "|";
}
}
classNameArr = classNameArr.substring(0, classNameArr.length - 1);
classIdArr = classIdArr.substring(0, classIdArr.length - 1);
console.log("classNameArr:" + classNameArr + ",classIdArr:" + classIdArr)
if (classNameArr == '' | classIdArr == '') {
wx.showToast({
title: '请填写完整的班级信息',
icon: 'none'
})
}
//将数据放入缓存中
wx.setStorageSync("info", classNameArr);
wx.setStorageSync("classKey", classIdArr);
wx.setStorageSync("classInfoList", classInfoList);
wx.setStorageSync("facultyInfoList", facultyInfoList);
wx.setStorageSync("majorInfoList", majorInfoList);
wx.setStorageSync("schoolChecked", schoolChecked);
wx.navigateBack({
delta: 1
})
},
})
wxss
page {
background: #f5f5f5;
overflow-y: scroll;
overflow-x: hidden;
padding-bottom: 200rpx;
}
.body {
background: #fff;
font-size: 36rpx;
}
.openSchool {
display: inline-block;
position: relative;
left: 5%;
width: 7%;
}
.openFaculty {
display: inline-block;
position: relative;
left: 5%;
width: 7%;
}
.openMajor {
display: inline-block;
position: relative;
left: 5%;
width: 7%;
}
.major-view {
position: relative;
left: 10%;
}
.faculty-view {
position: relative;
left: 5%;
}
.class-view {
position: relative;
left: 10%;
}
.select_icon {
width: 34rpx;
height: 34rpx;
margin-left: 8rpx;
}
.className, .majorName, .facultyName, .schoolName {
display: inline-block;
}
.block {
width: 750rpx;
height: 120rpx;
background: white;
line-height: 80rpx;
text-align: center;
padding-top: 40rpx;
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
}
.submitBtn {
width: 688rpx;
height: 80rpx;
background: rgba(51, 150, 251, 1);
border-radius: 8rpx;
margin: 0rpx 33rpx;
line-height: 80rpx;
}
.tj {
width: 80rpx;
height: 80rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 44rpx;
}
.text {
margin-left: 14rpx;
}
选中的图片
未选中
扫一扫
5383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
