zoukankan      html  css  js  c++  java
  • 数据列表的全选、反选以及批量操作

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

    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 = [];
    ((&quot;input[name='columnId']:checked&quot;).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 = [];
    ((&quot;input[name='columnId']:checked&quot;).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();
    }
    ((&quot;#all_columnId&quot;).prop(&quot;checked&quot;,)columnId.length == $columnId.filter(":checked").length ? true : false);
    });

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

  • 相关阅读:
    Django学习2
    Django学习1
    python 基于tcp协议的文件传输3_解决粘包问题
    python socketserver
    python hashlib
    python struct模块
    python json 模块
    python socket模块
    13暑假集训#10 总结
    hdu 4493 卡输入输出
  • 原文地址:https://www.cnblogs.com/alisleepy/p/9982456.html
Copyright © 2011-2022 走看看