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

  • 相关阅读:
    【一天一个canvas】制作渐变式PPT背景(十五)
    【一天一个canvas】写文字(十四)
    【一天一个canvas】图像切割函数clip(十三)
    ThinkPHP 3.2 大写字母函数封装方法实例
    百度echarts 地图使用实例
    随机数生成
    需要修改php.ini文件支持操作,可不用直接操作php.ini
    定时多少时间调用指定URL
    自动调用接口
    tp5 Excel 批量导入
  • 原文地址:https://www.cnblogs.com/alisleepy/p/9982456.html
Copyright © 2011-2022 走看看