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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值