小程序多选复选框实现 野性酷女 2024-04-19 08:47 16阅读 0赞 //html部分 <view class="colClass" wx:for="{ {myData[school.id]}}" wx:for-item="class" wx:for-index="classIndex" data-scid="{ {school.id}}" data-id="{ {class.id}}" catchtap='radioFun'> //js var util = require("../../utils/util.js"); const app = getApp() Page({ data: { checked: false, activeNames: ['1'], myClassData: [], myData:[], selectClass: {} //存放id的对象 }, onLoad: function() { this.loadData(); }, radioFun(e) { var schoolId = e.currentTarget.dataset.scid; var classId = e.currentTarget.dataset.id; var selectClass = this.data.selectClass; var myData = this.data.myData; if (myData[schoolId]) { for (let i = 0; i < myData[schoolId].length; i++) { let item = myData[schoolId][i]; if (item.id == classId){//判断点击的那个元素是否为遍历出的那个数据,是就进行操作加状态 if (item.active) { item.active = false;//取消响应 if (selectClass[item.id]){ delete selectClass[item.id];//删除点击后已存在的id } } else { item.active = true;//加入响应 selectClass[item.id] = item.id;//把数据加入对象 } } myData[schoolId][i] = item;//保存对象数据 } this.setData({//再次保存 myData: myData, selectClass: selectClass }); } }, }) 完整代码: html: <!--addClass.wxml--> <view class="container"> <view class="selectContain"> <view class="contain" wx:for="{ {myClassData}}" wx:for-item="school" data-scid="{ {school.id}}" wx:for-index="schoolIndex" data-num="{ {schoolIndex}}" data-addTemp="{ {school.addTemp}}" bindtap='collaFun'> <view class="desc"> <view class="conLeft"> <view class="logo"> <image class="logoPic" src="logo.png"></image> </view> <view class="title">{ {school.school_name}}</view> </view> <view class="open"> <image class="openPic" src="open.png"></image> </view> </view> <view class="collapseItem" wx:if="{ {school.addTemp}}" data-sccheck="{ {school.addTemp}}"> <view class="colClass" wx:for="{ {myData[school.id]}}" wx:for-item="class" wx:for-index="classIndex" data-scid="{ {school.id}}" data-id="{ {class.id}}" catchtap='radioFun'> <radio color='#40CBE5' style="transform:scale(0.7);" checked="{ {class.active}}" data-checktemp="{ {class.addTemp}}" data-sc='{ {schoolIndex}}' data-cl='{ {classIndex}}'></radio> { {class.class}} </view> </view> </view> </view> <view class="btn"> 添加班级 </view> </view> js: //index.js //获取应用实例 //自己写的多项复选框选择功能 var util = require("../../utils/util.js"); const app = getApp() Page({ data: { checked: false, activeNames: ['1'], myClassData: [], myData:[], selectClass: {} }, collaFun(e) { var addTemp = e.currentTarget.dataset.addtemp; console.log('scaddTemp', addTemp); var num = e.currentTarget.dataset.num; var scid = e.currentTarget.dataset.scid; if (addTemp == false) { for (let i = 0; i < this.data.myClassData.length; i++) { if (i == num) { this.setData({ ['myClassData[' + num + '].addTemp']: true }); } else { this.setData({ ['myClassData[' + i + '].addTemp']: false }); } } } else { this.setData({ ['myClassData[' + num + '].addTemp']: false }); } this.showClass(scid); }, onLoad: function() { this.loadData(); }, radioFun(e) { var schoolId = e.currentTarget.dataset.scid; var classId = e.currentTarget.dataset.id; var selectClass = this.data.selectClass; var myData = this.data.myData; if (myData[schoolId]) { for (let i = 0; i < myData[schoolId].length; i++) { let item = myData[schoolId][i]; if (item.id == classId){ if (item.active) { item.active = false; if (selectClass[item.id]){ delete selectClass[item.id]; } } else { item.active = true; selectClass[item.id] = item.id; } } myData[schoolId][i] = item; } this.setData({ myData: myData, selectClass: selectClass }); } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, loadData() { //获取缓存的老师id var that = this; util.getStoreInfo(that); //获取老师的所有学校信息 wx.request({ url: 'https://haiyunht.langqiyun.cn/index/api/getTeacherSchool?id=' + this.data.tid, header: { 'content-type': 'application/json' // 默认值 }, success(res) { let data = res.data.data; if (res.data.code == 200) { that.setData({ myClassData: data }, function() { that.fieldAddClass(); }); console.log('that', that.data.myClassData) } } }) }, fieldAddClass() { const myClassData = this.data.myClassData; console.log('myClaData', myClassData); for (let i = 0; i < myClassData.length; i++) { this.setData({ ['myClassData[' + i + '].addTemp']: false, ['myClassData[' + i + '].loadData']: false, }); } console.log('myClaData', myClassData); }, showClass(id){ console.log('学校id',id); var that = this; var myClassData = this.data.myData; if (!(myClassData[id] && myClassData[id].length)){ wx.request({ url: 'https://haiyunht.langqiyun.cn/index/api/getTeacherClass?id=' + id, header: { 'content-type': 'application/json' // 默认值 }, success(res) { myClassData[id] = res.data.data; that.setData({ myData: myClassData }); } }) } console.log('myData000',that.data.myData); console.log('idd',id) var myDataInfo = that.data.myData[id]; console.log('myDataInfo.length', myDataInfo) for (let m = 0; m <2;m++){ that.setData({ ['myDataInfo[' + m + '].addTemp']: false, }); } console.log('000', that.data.myData); } })
还没有评论,来说两句吧...