ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-06-10 13:44:39  阅读:281  来源: 互联网

标签:function selectStudent selectLocation weui length 全选 跳转 var 页面


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: "高新详情" },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: 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

 

标签:function,selectStudent,selectLocation,weui,length,全选,跳转,var,页面
来源: https://www.cnblogs.com/lsc-boke/p/10997196.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有