Jquery Datatable添加复选框,实现批量操作。

本文介绍如何在Datatable中添加复选框实现批量操作功能。通过前端JavaScript代码绑定复选框并收集选中项,发送给后台Java进行批量处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近一段时间,一直在写前端的东西,自己也不擅长,最近也有所长进,把工作中用到的一些前端知识整理一下,下次用到就不用再找了。这次主要是在datatable中添加复选框,然后实现批量操作的功能。因为是公司的项目中,不是完整的例子,只是记录前端的写法。

datatable和js代码
"aoColumns" : [
                    {"sTitle":"序号", "mDataProp": null,"targets": 0,"sClass": "center", "bSortable": false, "sWidth": "100"},
                    {
                        "sTitle": '',
                        "sClass": "center", "bSortable": false, "sWidth": "20",
                        "mRender": function (settings, rowIdx, rec, type) {
                            var date = rec.id + "/" + rec.cjr;

                            /*var btnBind = "<label><input type='checkbox' name='checkBox1' value='" + rec.basewxid + "'/><span class='lbl'></span></label>";*/
                            var btnBind = "<label><input type='checkbox' name='checkBox1' value='" + date + "'/><span class='lbl'></span></label>";
                            return btnBind;
                        }
                    },
                    {"sTitle":"订单编号", "mDataProp": "orderid","sClass": "center", "bSortable": false, "sWidth": "200"},

        ]
    //批量绑定
        var _bind = function (b) {
            var checkedBox = $("input[name='checkBox1']:checked");
            if (checkedBox.length == 0) {
                top.Alert("请先选择绑定的记录!");
                return;
            } else {
                var chk_value = [];
                $('input[name="checkBox1"]:checked').each(function () {
                    //var method =  $("#" + $(this).val()).val();
                    chk_value.push($(this).val());
                });
                var wxid = $("#bindwxid").val();
                //top.Alert(chk_value + wxid);
                $.ajax({
                    type: 'POST',
                    url: "tcWechat/bindWeChatid.do?chk_value=" + chk_value + "&wxid=" + wxid,
                    success: function (data) {
                        top.Alert(data.msg);
                        _searchData();
                        //top.Notice(data.msg);
                    },
                });
            }
        };
后台java代码
@RequestMapping(value = "/bindWeChatid")
    @ResponseBody
    public Result bindWeChatid(String[] chk_value, String wxid) {
        List<String> values = Arrays.asList(chk_value);
        Result result = new Result();
        List<BindInfo> bindInfos = new ArrayList<>();
        for(String bind : values){
             String arr[] = bind.split("/");
             BindInfo bindInfo = new BindInfo();
             bindInfo.setBindId(arr[0]);
             bindInfo.setCjr(arr[1]);
             bindInfos.add(bindInfo);
            }
        
           //……
            

        return result;
    }
效果图

1240732-20180313161638334-1572633914.png

小结

没有截多少图,最终是实现了这个功能,简单记录一下。

转载于:https://www.cnblogs.com/black-spike/p/8557928.html

### 如何在 jQuery DataTable 中设置第一列作为复选框 为了实现jQuery DataTable 的第一列显示复选框并允许用户进行多选操作,可以按照如下方法配置: #### 初始化 DataTable 并定义复选框列 通过 `columns` 参数来指定每一列的内容,在这里特别针对第一列设置了自定义渲染器用于创建复选框。 ```javascript $(document).ready(function() { var table = $('#example').DataTable({ "columnDefs": [ // 禁用第一列排序功能 { "orderable": false, "targets": 0 } ], "columns": [ // 定义第一列为复选框 { "data": null, "defaultContent": "<input type='checkbox' class='select-checkbox'>", "className": 'dt-body-center', "title": "" }, // 后续其他数据列... { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "age" }, { "data": "start_date" }, { "data": "salary" } ] }); }); ``` 上述代码片段中,对于第一列使用了 `"data": null` 和 `"defaultContent"` 来插入 HTML 输入控件 `<input>` 标签表示复选框[^4]。同时禁用了该列的排序能力以防止影响用户体验[^2]。 #### 获取被勾选行的信息 当需要处理这些已被选择的记录时,可以通过遍历所有带有特定类名 `.select-checkbox:checked` 的元素找到哪些行已经被标记,并进一步提取所需信息。 ```javascript function getSelectedRowsData(){ var selectedData = []; $.each($('#example tbody input[type="checkbox"]:checked'), function(index, element){ var row = $(element).closest('tr'); var rowData = table.row(row).data(); selectedData.push(rowData); }); console.log(selectedData); // 输出所选中的行对应的数据对象数组 } ``` 此函数会收集所有处于选中状态下的复选框所在的那一整行的相关联数据,并将其存储在一个新的列表里供后续逻辑调用[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值