最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示,
所以建议从layui官网把整个下载下来,
下面看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./module/layui/css/layui.css">
<style>
table>thead>tr>th,
table>tbody>tr>td {
text-align: center!important
}
</style>
</head>
<body>
<div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th>
<input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
</th>
<th>ID</th>
<th>角色名</th>
<th>唯一标识</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody class="role_list">
<tr>
<td>
<input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
</td>
<td>1</td>
<td>张三</td>
<td>哈哈</td>
<td>已完成</td>
<td>编辑</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
</td>
<td>2</td>
<td>李四</td>
<td>呵呵</td>
<td>未完成</td>
<td>编辑</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
</td>
<td>3</td>
<td>王五</td>
<td>嘻嘻</td>
<td>已完成</td>
<td>编辑</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="./module/layui/layui.js"></script>
<script>
layui.use(['form', 'element', 'jquery'], function () {
var form = layui.form(),
element = layui.element(),
$ = layui.jquery;
//全选功能
form.on('checkbox(allChoose)', function (data) {
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
child.each(function (index, item) {
item.checked = data.elem.checked;
});
form.render('checkbox');
});
//全选和部分选中时候,表头全选按钮的样式变化
form.on('checkbox(itemChoose)', function (data) {
var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
if (sib == total) {
$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", true);
form.render();
} else {
$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",
false);
form.render();
}
});
});
</script>