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 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
javascript工具库代码
Mar 29 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
详解微信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
php 获取页面中指定内容的实现类
2014/01/23 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
介绍一下write命令
2012/09/24 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
公司保密承诺书
2014/03/27 职场文书
机关搬迁方案
2014/05/18 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android