layui批量取消和单个取消用同一个接口的做法

批量取消和单个取消用同一个接口的做法

1.分析需求

	//批量取消
        点击复选框多选.全选.可以点击批量取消 来做取消动作
        没有选中复选框点击批量取消按钮 则弹窗显示 '请选择至少1个的商品数量！'	
	//单个取消
		点击弹出层的确定按钮 可以完成取消动作 并关闭弹出层

2.设计程序

	//单个取消
        1.先拿到id 看后台:data.buttonId/ data.itemId 
		2.点确认请求后台删除接口 只要有动作就会有接口 要交互,调用后台给的删除接口 
		3.向服务端发送删除指令 传当前id给后台 告诉后台我要做取消动作 
        3.要写Ajax 要掉用很多次的所以一般封装成一个函数 随时调用 通过传参数的方式传给data再传给后台
	//批量取消
		1.点击复选框事件 
        	判断当前是单选状态one 还是全选状态all 还是全不选状态
            	假如是one 则
                    判断当前点击复选框是选中状态还是非选中状态
                        选中状态则 
                            获得当前行商品的id 
                            并把获取到的id 以数组形式存储
                            再通过Ajax 的data 传参给后台 
                        非选中状态则
                            要把之前存好在数组里的id数据删掉
                            因为只有之前已经点击选中过了 再次点击复选框时才会出现非选中的状态 
                            而只要点击就会把该行数据id存到数组里
                            所以如果不选了 就要把原来存好的数据删掉
                 假如是all 则
                        把获取到的全部id 以数组形式存储
                        再通过Ajax 的data 传参给后台 
                 假如是全不选 则
		2.点击批量取消按钮事件 调用接口函数 传参
        		 拿到行数据数组则 
                 	遍历 传参
                 没有行数据则
                 	弹窗显示 '请选择至少1个的商品数量！'
		3.写Ajax接口
			用函数封装起来 才能方便调用和 接收参数
	

3.代码实现

注册事件 位置: 放在table.use里面

		//单个行数据取消
//先有容器挂载 注意一定要有lay-filter="对应的值"
        <table class="layui-hide" id="test" lay-filter='test'></table>

   table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                objdata = data;
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                switch (obj.event) {
               // obj.event是获得 lay-event 对应的值del（也可以是表头的 event 参数对应的值）
                    case 'del':
                        console.log(1)
                        layer.confirm('真的取消么', {
                            title: '提示'
                        }, function(index) {
                            // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            // layer.close(index);
                           //点击确定按钮的时候回调这个函数 传当前行的id给后台
                            cancelGoods({
                                    buttonId: data.buttonId,
                                    itemId: data.itemId
                                }, index, -2)
                                // 3.重新刷新 4.点击确认关闭框 这两步动作可以写进接口函数里 
                        });
                        break;
                }
            });

//HTML先写个容器 绑定id= massLaunch  
        <!-- 右侧功能键 -->
        <div class="toolBox">
            <button type="button" class="layui-btn layui-btn-sm" id="massLaunch">批量取消</button>
        </div>		
//js 
//一开始先给个容器来装 要取消的id 保存为数组 形式
        var ids = [];
//点击批量取消按钮事件 绑定了id 'massLaunch' 假如没有选中就点击会弹出'层 否则把数组遍历传给函数
         $('#massLaunch').click(function() {
                        layer.confirm('确认取消吗', {
                            title: 提示
                        }, function(index) {
                            if (ids.length == 0) {
                                layer.msg('请至少选择一项')
                                return false;
                            }
                            for (var i = 0; i < ids.length; i++) {
                                cancelGoods(ids[i], index, -1)
                            }
                        })
                    })	
//表格复选框事件 监听复选框选择的情况 来获得选中保存各种情况下的id
		table.on('checkbox(test)', function(obj) {
                console.log(obj.checked); //当前是否选中状态
             	console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                if (obj.type == 'one') {
                    if (obj.checked) {
                        //存id 要有容器ids 用js的push方法添加到容器
                        ids.push({
                            buttonId: obj.data.buttonId,
                            itemId: obj.data.itemId
                        })
                    } else {
                        // 要把之前存好在数组里的id数据删掉 通过遍历拿到 去匹配当前的行数据id 一致就执行删除动作
                        for (var i = 0; i < ids.length; i++) {
                            if (ids[i] == obj.data.itemId) {
                                // 删除方法splice() 方法用于插入、删除或替换数组的元素。该方法会改变原始数组
                                ids.splice(i, 1);
                            }
                        }
                    }
                } else { //all 全不选
                    if (obj.checked) {
                        //全选的时候要拿到所有的行数据 遍历 push一个个添加id
                        for (var i = 0; i < obj.length; i++) {
                            ids.push({
                                buttonId: obj[i].buttonId,
                                itemId: obj[i].itemId
                            })
                        }
                    } else {
                        全不选
                        ids = [];
                    }
                }
            });
	

3.写Ajax接口 位置: js

//写完保存id的一系列操作 就可以对接口 传id给后台取消了   
function cancelGoods(arr, index, pindex) {
            $.ajax({
                url: http + "/bitem/cancelItem", //服务端的请求地址
                type: 'POST', //http请求方式 get，post，put，delete，options
                data: {
                    buttonId: arr.buttonId,
                    itemTitle: arr.itemId,
                },
                // dataType: 'json',
                // contentType: 'appliction/json',//告诉服务端客户端提交的请求参数的数据结构
                //当请求状态码为200时回调此函数，将服务端返回的数据传给此函数
                success: function(res) {
                    // let obj = res.result.data || []; 现在这个接口不用拿数据 只需要传数据给后台 所以不用写
                    if (res.status == 'success') {
                        if (pindex == -2 || ids.length - 1) {
                            getdata();
                            layer.close(index)
                        } else {
                            return false;
                        }

                    }
                    successService(res);
                }
            })
        }