小程序多选复选框实现

野性酷女 2024-04-19 08:47 68阅读 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:

<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);
       
      }
    
    })