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);
    //在这下边执行异步删除等操作
    });

  • 相关阅读:
    毫秒倒计时小Demo
    css3 翻转
    canvas
    html5
    css3
    一些免费的svn空间(SVN代码托管)
    Xcode 6制作动态及静态Framework
    ios 动态执行的代码
    ios nsarray对象问题
    iOS xcode 编译选项 architecture(cup架构问题)
  • 原文地址:https://www.cnblogs.com/alisleepy/p/9982456.html
Copyright © 2011-2022 走看看