layui表格监听全选_layui表格(表单)的全选功能

最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示,

所以建议从layui官网把整个下载下来,

下面看代码

Document

table>thead>tr>th,

table>tbody>tr>td {

text-align: center!important

}

ID角色名唯一标识状态操作

1张三哈哈已完成编辑2李四呵呵未完成编辑3王五嘻嘻已完成编辑

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();

}

});

layui表格监听全选_layui表格(表单)的全选功能相关推荐

html表格添加选项代码,使用实例演示表单中的选项卡功能在里面添加table id=bootstrap-table/table后不显示表格...
.time-input{ display: inline; } .add-right{ float: right; font-size: 20px; border: 1px solid #111111 ...
button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据获取选中数目验证是否全选提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
layui checkbox 监听
普通单选框 <input lay-filter="switchTest" type="checkbox" name="type[]" ...
ajax form表单提交_LayUI提交表单，监听select，分页组件
1.LayUI提交表单这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值, ...
layui select监听选中的值二级联动
layui select监听选中的值二级联动 demo下载地址 html <form class="layui-form" action="">& ...
common-io-2.0的新功能之文件监控FileAlteration（文件监听的两种实现方法《很全的监听文件例子》）...
common-io-2.0的新功能之文件监控FileAlteration(文件监听的两种实现方法<很全的监听文件例子>) 转载于:https://www.cnblogs.com/rocky ...
7.20 Bootstrap、企业黄页2.0、form表单、全选不选反选
Bootstrap.企业黄页2.0.form表单.全选不选反选一.Bootstrap PPT内容 HTML中导入Bootstrap Bootstrap教程网站二.企业黄页2.0 三.form表单 ...
html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...

layui表格监听全选_layui表格(表单)的全选功能

layui表格监听全选_layui表格(表单)的全选功能相关推荐

最新文章

热门文章