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

最近一段时间，一直在写前端的东西，本身也不擅长，最近也有所长进，把工做中用到的一些前端知识整理一下，下次用到就不用再找了。此次主要是在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;
    }

效果图

小结

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