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;
    }

效果圖

小結

沒有截多少圖，最終是實現了這個功能，簡單記錄一下。