欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序--多选框全选与反全选 以及 购物车中删除选中的商品

程序员文章站 2022-07-13 23:09:21
...

实现的效果就是:
1.点击全选选中所有商品,再点击全选,取消勾选
2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串
3.点击删除按钮时删除选中的商品
点击全选
微信小程序--多选框全选与反全选 以及 购物车中删除选中的商品
再次点击全选框
微信小程序--多选框全选与反全选 以及 购物车中删除选中的商品
wxml关键代码
重要代码
value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false未选中

//删除购物车商品的按钮
  <view bindtap="delete_car" class="btn_delete">删除</view>
//购物车商品部分
 <checkbox-group bindchange="checkboxChange">
        <view wx:for="{{car_goods}}" class="car_list" wx:key="key" >  
          <label class="checkbox">
            <checkbox value="{{item.goods_id}}" checked="{{item.checked}}" class="checkbox"/> 
          </label>
          <image src="/static/images/goods/{{item.goods_picture}}" class="goods_img" bindtap="gotodetail"></image>  
          <view class="box1" bindtap="gotodetail">
            <view class="goods_name" >{{item.goods_name}}</view>
            <view class="fahuo">24小时内发货</view>
            <view class="goods_price"style="color: rgb(241, 32, 32)">{{item.goods_price}}</view>
          </view>
          <view class="box2" >
            <image src="/static/images/commom/jian.png" class="jian_img" bindtap="add_goods"></image>
            <text class="goods_num">1</text>
            <image src="/static/images/commom/jia.png" class="jia_img" bindtap="delete_goods"></image>
          </view>
        </view>
    </checkbox-group>

//全选框
 <checkbox   class="checkbox" bindtap="selectall"/> 
    <view class="quanxuan">全选</view>

全选反选 js 关键代码


  data: {
    select_all: false,
    car_goods:[
    ],
    checkbox_goodsid:'',
  },
   /**
   * 全选与反全选
   */
  selectall: function (e) {
    var that = this;
    var arr = '0';
    //that.data.car_goods.length是商品的个数
    for (let i = 0; i < that.data.car_goods.length; i++) {
    //循环给每个商品的checked赋值
      that.data.car_goods[i].checked = (!that.data.select_all)
      if (that.data.car_goods[i].checked == true) {
        // 全选获取选中的值  以字符串拼接的形式 拼成一个字符串
         arr = arr  +","+ that.data.car_goods[i].goods_id;
      }
    }
   console.log("arr="+arr)
   //赋值
    that.setData({
      car_goods: that.data.car_goods,
      select_all: (!that.data.select_all),
      checkbox_goodsid: arr
    })
  },
  
  // 单选
  checkboxChange: function (e) {
    var that =this;
    //这加个0 是我为了方便后台处理。
    var checkbox_goodsid = 0+ ','+that.data.checkbox_goodsid
    this.setData({
      checkbox_goodsid: checkbox_goodsid//单个选中的值
    })
    console.log("checkbox_goodsid=" +that.data.checkbox_goodsid)
  },

购物车删除选中商品的 关键js代码:

 /**
   * 删除选中的商品
   */
  delete_car:function(){
    var that = this
    var checkbox_goodsid = that.data.checkbox_goodsid
    console.log("点击删除选中的商品id" + checkbox_goodsid)
    if (checkbox_goodsid==""){
      wx.showToast({
        title: '您尚未选中商品',
        duration: 2000,//持续时间
        icon: 'none'
      })
    }
    else{
      wx.showModal({
        title: '提示',
        content: '您是否要删除已选中商品',
        success: function (res) {
          if (res.confirm) {//这里是点击了确定以后
            //删除购物车的所有商品
            console.log("点击确定的商品id" + checkbox_goodsid)
            wx.request({
              url: 'http://localhost:8080/delete_choosegoods',
              data:{
                checkbox_goodsid: checkbox_goodsid
              },
              success: function (e) {
              //页面刷新
                const pages = getCurrentPages()
                const perpage = pages[pages.length - 1]
                perpage.onLoad()   
              }
            })
          } else {//这里是点击了取消以后
            console.log('用户点击取消')
          }
        }
      })
    }
  },

删除商品的后台关键代码
action.java代码

/*
  * 删掉购物车选中的商品
* */
    @RequestMapping("/delete_choosegoods")
    public  Integer delete_choosegoods(String checkbox_goodsid){
        System.out.println("checkbox_goodsid::"+checkbox_goodsid);
        String openid = (String) redisTemplate.boundValueOps("openid").get();
        int n = 0;

        String[] arrays2 =checkbox_goodsid.split(",");
        System.out.println(",分割后的0"+arrays2[0]);

          for(int i=1;i<arrays2.length;i++){
           int goods_id = Integer.parseInt(arrays2[i].toString());
              System.out.println("goods_id"+goods_id);
          n = goodsService.delete_cargoods(openid,goods_id);
       }
        return n;
    }

如果看到这里还是看不懂:可以看一下下面这个文直接复制他的代码去试一下,可以直接运行,我觉得挺好的
微信小程序获取复选框全选,反选选中的值
代码运行的效果图如下:
微信小程序--多选框全选与反全选 以及 购物车中删除选中的商品
但是我把他的方法用在我的页面中出现了几个问题
ps:1,2问题已解决:that.data.listData[i].code.split(’,’) 已经是一个数组 不需要加concat方法。
1.arr = arr.concat(that.data.listData[i].code.split(’,’));
我使用 split会报错
2.去掉split 单选我获得的数据传到后台是[“1”,“2”,“3”]类型的
全选是[1,2,3]类型的(这样子传到后台的话,需要在后台进行分割获取值。)

先通过]分割在用[分割再用,分割,因为还可能有"",所以在循环里还要用双引号封
String[] arrays = checkbox_goodsid.split("]");
System.out.println("]分割后的arrays[0]"+arrays[0]);

String[] arrays1= arrays[0].split(" \\[");
System.out.println("[分割后的0:"+arrays1[0]);
 
String[] arrays2 =arrays1[arrays1.length-1].split(",");
System.out.println(",分割后的0"+arrays2[0]);
for(int i=1;i<arrays2.length;i++){
//这里通过"分割获取信息,但需要用\"对双引号进行转义
获取后转成整型。
    }

3.使用后来的自己的代码获取的数据类型是下面这种
前台输出
微信小程序--多选框全选与反全选 以及 购物车中删除选中的商品
传入后台输出
微信小程序--多选框全选与反全选 以及 购物车中删除选中的商品