全选反选,获取选中行数据的处理思路

bootstrap表格样式,可以直接复制粘贴拿去用。
我们操作最多的就是json数据,后台一般返回的为一个json数组,但是如果直接把json数组的值存入多选框的value值里面是不行的 ,因为json字符串的引号没有被转义,所以这样是行不通的,但是转义反而又把问题变复杂了,而存json对象到value里面是读取不出来结果的,读取出来的内容是[object object]所以就不要想了。但是json数组既然是数组,就肯定有索引,所以我们可以把索引存入到value中,这样我们就可以通过索引获取一整条json字符串,也就是当前行的所有数据,这样操作就比用复杂的js去获取某行元素要方便的多。该方法主要用于处理批量操作。

<table class="table table-hover table-bordered table-list">
    <thead>
    <tr>
        <th width="16">
            <label>
                <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x">
            </label>
        </th>
        <th width="200">crc32</th>
        <th>url</th>
    </tr>
    </thead>
        <tr>
            <td>
                <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]"
                       value="">
            </td>
            <td>111</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]"
                       value="">
            </td>
            <td>222</td>
            <td>2222</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]"
                       value="">
            </td>
            <td>333</td>
            <td>3333</td>
        </tr>
</table>
//全选反选
$(".js-check-all").on('click',function() {  
	$("input[name='ids[]']").prop("checked", this.checked);  
});  
$("input[name='ids[]']").on('click',function() {  
	var $subs = $("input[name='ids[]']");  
	$(".js-check-all").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);  
});
//全选反选end
//获取选中行数据(data为返回的json数组)
function show(data){
    console.log(data);
    obj = $(".js-check");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(data[obj[k].value]);
    }
    console.log(check_val);
    return check_val;
}
//获取选中行数据end
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值