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

  • 相关阅读:
    猿辅导-去除数组中数量大于k的数
    OSI体系结构各层协议
    京东-学生合唱队分组
    146-LRUCache
    76-最长上升子序列
    无序数组中三个数字乘积最大值
    38-字符串的排列
    35-复杂链表的复制
    208-Implement Trie(Prefix Tree)
    69-求一个整数的平方根
  • 原文地址:https://www.cnblogs.com/alisleepy/p/9982456.html
Copyright © 2011-2022 走看看