• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序添加表单页面跳转到多选全选页面(备份前端网)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

creat
<view bindtap="selectLocation" class=\'add-cont\'>
<view class=\'add-list\'>
<view class=\'add-list-left\'>打卡地点</view>
<view class=\'add-list-right\'>{{location}}</view>
</view>
</view>

  onShow: function () {
    var selectStudent = app.globalData.selectStudent;
    var selectLocation = app.globalData.selectLocation;
    var selectdate = app.globalData.selectdate;
    console.log(selectStudent);
    console.log(selectLocation);
    console.log(selectdate);
    var student = "";
    var location = "";
    var date = "";
    var reg = /,$/gi;
    if (selectStudent != null && selectStudent.length > 0) {
      for (var i = 0; i < selectStudent.length; i++) {
        if (selectStudent[i].checked) {
          student +=  selectStudent[i].name + "," ;
        }
      }
    }
    if (selectLocation != null && selectLocation.length > 0) {
      for (var i = 0; i < selectLocation.length; i++) {
        if (selectLocation[i].checked) {
          location += selectLocation[i].name + ",";
        }
      }
    }
    if (selectdate != null && selectdate.length > 0) {
      for (var i = 0; i < selectdate.length; i++) {
        if (selectdate[i].checked) {
          date += selectdate[i].name + ",";
        }
      }
    }
    this.setData({
      student: selectStudent == null ?"请选择打卡学生":student.replace(reg, ""),
      location: selectLocation == null ? "请选择打卡地点" :location.replace(reg, ""),
      date: selectdate == null ? "请选择打卡日期" :date.replace(reg, "")
    })

  },
View Code

selectLocation
js

// pages/manage/punch/selectStudent/index.js
var app = getApp();
var host = app.data.server;
var utils = require(\'../../../../utils/util.js\')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    selectLocation: [
      { id: 1, name: "长安校区",details:"长安详情" },
      { id: 2, name: "雁塔校区", details: "雁塔详情"},
      { id: 3, name: "高新校区", details: "高新详情" },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getData();
  },
  getData: function () {
    wx.showLoading({
      title: \'加载中\',
    })
    var that = this;
    wx.request({
      url: host + \'/punch/getBuilding.json\',
      method: \'GET\',
      data: {
        miniSession: wx.getStorageSync("session")
      },
      success: function (res) {
        if (res.statusCode == 200) {
          if (res.data.code == 0) {
            var d = res.data.data;
            console.log(d);
            that.setData({
              selectLocation: d
            })
          } else {
            utils.alert("抱歉", res.data.message + \'\');
          }
        } else {
          utils.alert("抱歉", \'服务器出错(\' + res.statusCode + \')\');
        }
      },
      fail: function () {
        utils.alert("抱歉", \'请求失败!\');
      },
      complete: function () {
        wx.hideLoading()
      }
    })
  },
  //全选择
  checkAll: function (e) {
    var selectedAll;
    var s;
    selectedAll = this.data.selectedAllGrade;
    s = this.data.selectLocation;

    selectedAll = !selectedAll;
    if (selectedAll) {
      for (var i = 0; i < s.length; i++) {
        s[i].checked = true;
      }
    } else {
      for (var i = 0; i < s.length; i++) {
        s[i].checked = false;
      }
    }
    console.log(s);
    console.log(selectedAll);
    this.setData({
      selectLocation: s,
      selectedAllGrade: selectedAll
    });

  },
  checkOneGrade: function (e) {
    var selectLocation = this.data.selectLocation;
    var ids = e.detail.value;
    console.log(ids);
    console.log(selectLocation);

    for (var i = 0; i < selectLocation.length; i++) {
      selectLocation[i].checked = false;
      console.log(ids.length);
      for (var j = 0; j < ids.length; j++) {
        if (selectLocation[i].id == ids[j]) {
          selectLocation[i].checked = true;
          break;
        }
      }
    }
    console.log(selectLocation);
    this.setData({
      selectLocation: selectLocation
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    app.globalData.selectLocation = this.data.selectLocation;
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
View Code

html

<!--pages/manage/punch/selectStudent/index.wxml-->
<view class=\'allbody\' bindtouchmove=\'move\'>

  <view class="weui-tab__panel">
    <!-- 选项卡1 -->
    <view class="" >
      <checkbox-group bindchange="checkAll"  data-type=\'grade\'>
        <label class="weui-cell weui-check__label">
          <checkbox class="weui-check" value="0" checked="{{selectedAllGrade}}" />
          <view class="weui-cell__hd weui-check__hd_in-checkbox">
            <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!selectedAllGrade}}"></icon>
            <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{selectedAllGrade}}"></icon>
          </view>
          <view class="weui-cell__bd">全选</view>
        </label>
      </checkbox-group>

      <checkbox-group bindchange="checkOneGrade">
        <label class="weui-cell weui-check__label" wx:for="{{selectLocation}}" wx:key="value">
          <checkbox class="weui-check" value="{{item.id}}" checked="{{item.checked}}" />
          <view class="weui-cell__hd weui-check__hd_in-checkbox">
            <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
            <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
          </view>
          <view class="weui-cell__bd twoCk">
            <view class=\'twoCk-top\'>{{item.name}}</view>
            <view class=\'twoCk-foot\'>{{item.area}}</view>
          </view>
        </label>
      </checkbox-group>
    </view>

  </view>
</view>
View Code

css

/* pages/manage/punch/selectStudent/index.wxss */

page {
  background: #f2f2f2;
  height: 100%;
}

checkbox-group {
  background: #fff;
}

checkbox-group .weui-check__label {
  border-bottom: 1rpx solid #ccc;
  height: 50rpx;
}
.weui-check__hd_in-checkbox{
  height: 50rpx;
}
.weui-cells:before {
  border: none;
}

.weui-cells:after, .weui-cells:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 0px;
  color: #d9d9d9;
}

.weui-cells:after {
  border: none;
}

.weui-cell {
  position: static;
  height: 50rpx;
}

.weui-tab__panel {
  padding-top: 0rpx;
}

.weui-navbar {
  background: #fff;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  height: 90rpx;
}
.page__bd {
  padding-bottom: 0;
}

.weui-tab__content {
  padding-top: 60px;
  text-align: center;
}

.weui-cell__bd {
  font-size: 30rpx;
  color: black;
}
.twoCk{
  display: flex;
  flex-direction: column;
}
.twoCk-top{
  font-size: 30rpx;
}
.twoCk-foot{
  line-height:1.2;
  font-size:24rpx;
  color:#808080;
  margin-bottom: 10rpx;
}
View Code

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序获取Unionid发布时间:2022-07-18
下一篇:
微信小程序功能函数将对象的键添加到数组(函数深入)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap