layui表格checkbox选择全选样式及功能的实例


Posted in Javascript onMarch 07, 2018

在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。

1、layui版本号为 v1.0.9 rls版本(当前最新版本)

<span style="white-space:pre;">	</span><div class="layui-form">
	 <table class="layui-table">
	 <thead>
	  <tr>
	  <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
	  <th>人物</th>
	  <th>民族</th>
	  <th>出场时间</th>
	  <th>格言</th>
	  </tr> 
	 </thead>
	 <tbody>
	  <tr>
	  <td><input type="checkbox" name="" lay-skin="primary"></td>
	  <td>贤心</td>
	  <td>汉族</td>
	  <td>1989-10-14</td>
	  <td>人生似修行</td>
	  </tr>
	  <tr>
	  <td><input type="checkbox" name="" lay-skin="primary"></td>
	  <td>张爱玲</td>
	  <td>汉族</td>
	  <td>1920-09-30</td>
	  <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
	  </tr>
	 </tbody>
	 </table>
	</div>
	<script type="text/javascript" src="plugins/layui/lay/dest/layui.all.js"></script>
	<script type="text/javascript">
		var $ = layui.jquery,
			form = layui.form();
		//全选
		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');
		});
	</script>

2、版本号为v1.0.9 rls之前的版本需要更新几个文件

(a)layui\lay\dest 里的 layui.all.js文件

(b)layui\lay\modules里的 form.js 文件

(c)layui\css 里的 layui.css 文件

将以上三个文件从最新版本中覆盖到原来的版本,即可轻易实现checkbox的样式。

这篇layui表格checkbox选择全选样式及功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 #Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 #Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 #Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
You might like
php Ajax乱码
2008/04/09 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
ReactNative中使用Redux架构总结
2017/12/15 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
python中的装饰器详解
2015/04/13 Python
Python语言快速上手学习方法
2018/12/14 Python
python next()和iter()函数原理解析
2020/02/07 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
护理学毕业生求职信
2013/11/14 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
鉴史问廉观后感
2015/06/10 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript