记一次JS中数据表格的多选框的获取选中列的id方法

前言

记录一次，SpringBoot+vue项目中JS复选框获取id的方法

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML代码

1. 批量删除按钮

<button type="button" class="btn btn-outline-success" onclick="vm.deleteinfo()">删除</button>

2. 数据表格

<div class="row" style="overflow-y: scroll;max-height: 600px;width:100%">
        <table class="table table-hover" style="text-align: center">
            <thead>
            <tr>
                <th><input type="checkbox" id="all" onclick="choseAll(),watchVale()"></th>
                <th>序号</th>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>商品规格</th>
                <th>商品来源</th>
                <th>商品单位</th>
                <th>商品单价</th>
                <th>商品分类</th>
                <th>商品有效时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="val,index in res.list">
                <td><input type="checkbox" name="Fruit" v-bind:value="val.id" onclick="watchVale()"></td>
                <td>{{index+1}}</td>
                <td>{{val.material_code}}</td>
                <td>{{val.material_name}}</td>
                <td>{{val.material_specifications}}</td>
                <td>{{val.material_source}}</td>
                <td>{{val.material_measurement}}</td>
                <td>{{val.material_price}}</td>
                <td>{{val.material_type}}</td>
                <td>{{val.unable_time}}</td>
                <td>
                    <button type="button" v-on:click="updateinfo(val.id)" class="btn btn-outline-success btn-sm">修改
                    </button>
                    <button type="button" v-on:click="deleteinfo(val.id)" class="btn btn-outline-success btn-sm">删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

每一列的复选框，添加name属性、绑定id 、绑定获取id事件

<td><input type="checkbox" name="Fruit" v-bind:value="val.id" onclick="watchVale()"></td>

表头的全选框、添加id属性、绑定全选时间、获取id事件

 <th><input type="checkbox" id="all" onclick="choseAll(),watchVale()"></th>

每一列操作中的删除按钮(单个删除)

<button type="button" v-on:click="deleteinfo(val.id)" class="btn btn-outline-success btn-sm">删除</button>

二、JS代码

1. Vue对象中的Data

data: {
       list: {},//批量删除时存储id
       res: {},
       choseflag: false,
       typelist: {}
       },

2. JS文件(批量删除绑定的获取id事件)

// 将复选框中的选中条件和值进行匹配
function watchVale() {
	//获取复选框对象
    var items = document.getElementsByName("Fruit");
    //定义Vue中的list对象
    vm.list = [];
    //复选框的长度
    var checkboxsize = items.length;
    //定义标志位
    var count = 0;
    //进行遍历
    for (var i = 0; i < items.length; i++) {
        //判断多选框是否选中
        if (items[i].checked) {
            count++;
            //获取复选框的id值
            var vale = $("input[name='Fruit']")[i].value
            //添加进vm对象的集合中
            vm.list.push(vale);
        }
    }

    if (count < checkboxsize) {
        $("#all").prop("checked", false);
    }
    if (count == checkboxsize) {
        $("#all").prop("checked", true);
    }
};


function choseAll() {
    var flag = document.getElementById("all");
    if (flag.checked == false) {
        $("#all").prop("checked", false);
        $("input[name='Fruit']").prop("checked", false);
    } else {
        $("#all").prop("checked", true);
        $("input[name='Fruit']").prop("checked", true);
    }
}

3. 删除事件

            // 删除单个或者多个选择项
            deleteinfo(materialId) {
            	//判断用户是否选择
                if (materialId == undefined && vm.list.length == undefined) {
                    alert("请选择您要删除的内容！")
                } else {
                    var r = confirm("确认删除？");
                    if (r == true) {
                    	//判断多选
                        if (vm.list.length > 0) {
                            $.post(
                                "/mabuduo/mabuduoInfoDelete",
                                {
                                    data: vm.list,
                                },
                                function (data) {
                                    if (data == 0){
                                       alert("当前选择项中，存在正在使用的信息项！请核对后再删除！");
                                    }else{
                                        alert("删除成功");
                                    }
                                    //刷新
                                    window.history.go(0);
                                }
                            )
                        } else {
                        	//单删，创建数组
                            var data = [];
                            //将id每行的id添加进去
                            data.push(materialId);
                            $.post(
                                "/mabuduo/mabuduoInfoDelete",
                                {
                                    data: data,
                                },
                                function (data) {
                                    if (data == 0){
                                        alert("当前选择项中，存在正在使用的物资信息项！请核对后再删除！");
                                    }else{
                                        alert("删除成功！");
                                    }
                                    window.history.go(0);
                                }
                            )
                        }
                    }
                }
            },

三、后端接口的接参方式

/*
     * 删除基本信息
     * */
    @RequestMapping("/mabuduoInfoDelete")
    @ResponseBody
    public int mabuduoInfoDelete(@RequestParam(value = "data[]") String[] ids) {
	       调用Service层传递ids
	}
       

三、Mybatis的sql

<delete id="mabuduoInfoDelete">
    delete from mabuduo_info where id in
    <foreach collection="Ids" separator="," open="(" close=")" item="val">
        ${val}
    </foreach>
</delete>

到此OK!!! 详见物资管理系统。