数据列表的全选反选以及批量操作

Posted 2021-01-26 alisleepy

数据列表的全选、反选以及批量操作

html部分代码：
1、全选的checkbox： <input type="checkbox" value="" id="all_columnId">
2、每条数据前边的checkbox:<input type="checkbox" name="columnId" class="chrId" value="<% $Item.Id %>">

js代码部分：
全选与反选：
$("#all_columnId").on("click", function(){
if (this.checked) {
$("[name=columnId]:checkbox").prop("checked", this.checked);
//有模板才显示删除按钮
var check_value = [];
$("input[name=‘columnId‘]:checked").each(function(){
check_value.push($(this).val());
});
console.log(check_value);
check_value = $.grep(check_value, function(n){
return $.trim(n).length > 0;
});
if(check_value.length > 0){
$("#batch_del_fields").show();
}
}else{
$("[name=columnId]:checkbox").prop("checked", this.checked);
$("#batch_del_fields").hide();
}
});
$(".table").on("click","input[name=‘columnId‘]",function(){
var check_value = [];
$("input[name=‘columnId‘]:checked").each(function(){
check_value.push($(this).val());
});
console.log(check_value);
check_value = $.grep(check_value, function(n){
return $.trim(n).length > 0;
});
var $columnId = $("input[name=‘columnId‘]");
if(check_value.length > 0){
$(‘#batch_del_fields‘).show();
}else{
$(‘#batch_del_fields‘).hide();
}
$("#all_columnId").prop("checked",$columnId.length == $columnId.filter(":checked").length ? true : false);
});

操作部分：一般是批量删除、批量审核等
$("#batch_del_fields").click(function(){
//获取选中的
var check_value = [];
$("input[name=‘columnId‘]:checked").each(function(){
check_value.push($(this).val());
});
//check_value就是选中的部分，数组形式
console.log(check_value);
//在这下边执行异步删除等操作
});