批量删除之-复选框

在进行的项目中需用到批量删除,删除则需用到复选框,现贴出代码以备后用。

html代码如下

<button class="btn btn-xs btn-danger" onclick="delBatchInfo(‘patrolTask‘)"><i class="ace-icon fa fa-trash-o bigger-120"></i>删除勾选</button>
<table id="datatable" class="table table-striped table-bordered table-hover">
    <thead><tr><th class="center"><label><input type="checkbox" class="ace"  name="delBatch"/><span class="lbl"></span></label></th><th class="center">编号</th></tr> </thead>
    <tbody><tr><th class="center"><label><input type="checkbox" class="ace"  name="delBatch"  name="delBatch" value="‘+data.data[item].id+‘"/><span class="lbl"></span></label></th><td class="center"></td></tr></tbody>
</table>

js

$(‘table th input:checkbox‘).on(‘click‘ , function(){
    var that = this;
    $(this).closest(‘table‘).find(‘tr > td:first-child input:checkbox‘)
    .each(function(){
        this.checked = that.checked;
        $(this).closest(‘tr‘).toggleClass(‘selected‘);
});
delBatchInfo方法
/**********************************************
函数名:delBatchInfo
功能:批量删除记录
作者:milan
************************************************/
function delBatchInfo(type){
    var DelMessHtml="";
    var checkedNum=$("input[name=‘delBatch‘]:checked").length;
        if(checkedNum == 0) {
            alert("请选择删除对象!");
            return;
        } 

    if(confirm("警告:您要彻底删除记录吗?")){var checkedList=new Array();
        $("#datatable").find(‘tr > td:first-child input:checkbox‘)
        .each(function(){
            checkedList.push($(this).val());
        });                

    }

    ...

}

当我在删除提示中传递值时,删除出错,错误代码如下:

if(confirm("警告:您要彻底删除记录吗?")){
    var checkedList=new Array();
    $("input[name=‘delBatch‘]:checked").each(function(){
        checkedList.push($(this).val());
    });
}

原因是

$("input[name=‘delBatch‘]:checked").each(function(){
这代码把全部复选框都遍历,包括总勾选的复选框。总复选框是没有ID值的。正确代码应:
$("#datatable").find(‘tr > td:first-child input:checkbox‘)

这样才是只选择tr中td的复选框

每次删除后,执行setListTable(nowpage)刷新页面后,总复选框还是处理勾选状态,如图:

只能把table>thead的内容也放到setListTable方法里面才能解决
var tableHmtl=‘<thead><tr><th class="center"><label><input type="checkbox" class="ace"   name="delBatch" id="checkAll"/><span class="lbl"></span></label></th><th class="center">编号</th></tr> </thead> <tbody>‘;
tableHmtl+=‘<tr><td class="center"><label><input type="checkbox" class="ace"  name="delBatch" value="‘+data.data[item].id+‘"/><span class="lbl"></span></label></td><td class="center">‘+data.data[item].id+‘</td><tr>‘;
tableHmtl+=‘</tbody>‘;
$("#datatable").html(tableHmtl);
                                     
				
时间: 2024-10-11 10:58:03

批量删除之-复选框的相关文章

Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点). 1. QStandardItemModel在QTreeView中的使用 使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,它可以用于树形控件.列表控件.表格控件等等和条目有关的控件.QStandardItemModel用于列表

checkbox复选框全选批量删除

多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]"

angularJs获取复选框中id 进行批量删除

主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组.这里我们补充一下 JS 的关于数组操作的知识(1)数组的 push 方法:向数组中添加元素(2) 数组的 splice 方法:从数组的指定位置移除指定个数的元素 ,参数 1 为位置 ,参数2 位移除的个数(3)复选框的 checked 属性:用于判断是否被选中 具体代码: $scope.select

【jQuery】复选框的批量处理:全选、非全选

最近工作都在写jQuery,事实上我并没有系统学过js,今天跟大家分享一下最近写的一个有关复选框的批量处理. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <input type="button" class="button&quo

easyui datagrid 通过复选框删除新追加的数据问题

之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返回的总是错误的,各种查找后,网上说是配置了idField的缘故,要么就不配这个属性,要么就配置正确的:如此想到,自己在追加行时是没有ID的,只有保存后才会将ID填上去,我便把那个属性去掉了,测试OK

使用Struts2和jQuery EasyUI实现简单CRUD系统(三)——复选框进行多选删除操作

继上篇的jsp,json,EasyUI的结合顺利将数据库数据转换成json格式后再EasyUI完成展示(Retrieve)之后,接下来的实现增删改功能也很顺手了. 增的功能还是一样,只不过将原本自己写的form用ejui提供form代替而已. 删改功能需要拿到具体选择行的id. <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px;

将DataGridView每一行的复选框选中,将DataGridView选中的复选框删除

1,将DataGridView每一行的复选框选中 //DataGridView的行大于0行 if (dgv_MessageList.Rows.Count > 0)            {                for (int i = 0; i < dgv_MessageList.Rows.Count; i++) //循环DataGridView每一行                {                    if (checkBox1.Checked)  //如果选中

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

【ztree】完美实现复选框功能

在权限系统中,大多数的页面都用到了树形结构,其中最常用的便是树资源的加载和单击事件,除此之外ztree还可以实现很多功能.今天以实现复选框的添加功能为例,咱们再来深入的学习下ztree的应用. 一.实例描述 在用户管理模块中,需要给用户添加角色,而用户与角色的之间是一个多对多的关系.这里我们可以先加载两个角色树资源,通过两个树之间数据的交换,从而得到用户所拥有的角色资源,实现效果如下: 1.用户信息入口 2.加载角色信息 Datagrid表格中的"分配"按钮是针对单个用户的角色分配,而