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

最新推荐文章于 2024-06-12 10:02:09 发布

weixin_30466421

最新推荐文章于 2024-06-12 10:02:09 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/black-spike/p/8557928.html

本文介绍如何在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;
    }