layui结合form,table的全选、反选v1.0示例讲解


Posted in Javascript onAugust 15, 2018

1、需要引入layui.css和layui.js

2、html代码如下:

<div class="layui-form">
<table class="layui-table">
  <thead>
    <tr>
      <td>
        <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
      </td>
      <td>ID</td>
      <td>角色名</td>
      <td>唯一标识</td>
      <td>状态</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody class="role_list">
    <tr>
      <td>
        <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
      </td>
      <td>1</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
</table>
</div>

3、js代码如下:

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结合form,table的全选、反选v1.0示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
详解微信JS-SDK选择图片遇到的坑
Aug 15 #Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 #Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
layui 监听表格复选框选中值的方法
Aug 15 #Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 #Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 #Javascript
vue升级之路之vue-router的使用教程
Aug 14 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python实现Linux监控的方法
2019/05/16 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
建材业务员岗位职责
2013/12/08 职场文书
高中体育教学反思
2014/01/24 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
统计学教授推荐信
2014/09/18 职场文书
奖学金个人总结
2015/03/04 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
关于做家务的心得体会
2016/01/23 职场文书