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 = www.insearchofdesign.com + "/" + rec.cjr; /*var btnBind = "";*/
var btnBind = "";
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/www.insearchofdesign.com?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 values = Arrays.asList(chk_value);
Result result = new Result();
List 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;
}

效果图

小结

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

-->
返回顶部