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