zoukankan      html  css  js  c++  java
  • 小程序之多选择框(并且A页面跳B页面,B选中数据后带回A页面显示)

    亲测挺好用的:

      借鉴博客:https://blog.csdn.net/qq_35713752/article/details/79093598

    1、b.wxml页面:

     <checkbox-group bindchange="checkboxChange">
            <checkbox value='{{item.staff_name}},{{item.staff_id}}' >{{item.staff_name}}</checkbox>
                        
     </checkbox-group>

      b.js代码,多选获取选中值方法:

    // 获取多选框list中选中的值和对应的id
      checkboxChange: function (e) {
        var text=[];
        var id = [];
        for (var i = 0; i < e.detail.value.length;i++){
          var aaa = e.detail.value[i].split(',');
          text = text.concat(aaa[0])
          id = id.concat(aaa[1])
        }
        console.log(text + "========" + id);
      },

    ==============跳转页面并带回数据====================

     A页面设置两个初始变量:

     /**
       * 页面的初始数据
       */
      data: {
        staff_dis:"",//人员选择员工ids
        staff_names:"",//人员选择员工names
      },

    B页面点击返回按钮,触发函数:

    saveSelectReturn:function(){//保存并返回按钮
      var that = this;
    
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1];   //当前页面
      var prevPage = pages[pages.length - 2];  //上一个页面
     
      // console.log("人员ids:"+ that.data.checkbox_select_ids);
      // console.log("人员names:"+ that.data.checkbox_select_names);
      //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
      prevPage.setData({
        // mydata: {id:1, text:2}
        staff_ids: that.data.checkbox_select_ids.join(","),  //这里表示上个页面的staff_ids变量赋值
        staff_names: that.data.checkbox_select_names.join(","),//上个页面的staff_names变量赋值
    }); 
    wx.navigateBack();
    //返回上一页
    },

    步骤效果图:

      1、B页面选中人员后,点击保存并返回,如下:

      2、A页面效果图展示:

    。。。

  • 相关阅读:
    2019春招面试题总结-03
    2019春招面试题总结-02
    2019春招面试题总结-01
    Node.js 全局对象
    Node.js 路由
    Node.js 函数
    Node.js 模块系统
    Node.js Stream(流)
    Node.js Buffer(缓冲区)
    Node.js EventEmitter
  • 原文地址:https://www.cnblogs.com/spll/p/13879661.html
Copyright © 2011-2022 走看看