layui获取选中行数据的实例讲解


Posted in Javascript onAugust 19, 2018

第一步: 在jsp文件中设置按钮

<div class="layui-btn-group demoTable">

 <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
 <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
 <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>

第二步:在jsp文件中创建表格

<table class="layui-table" lay-data="{width: 892, height:332, url:'/demo/table/user/', page:true, id:'idTest'}" lay-filter="demo">
 <thead>
  <tr>
   <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
   <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
   <th lay-data="{field:'username', width:80}">用户名</th>
   <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
   <th lay-data="{field:'city', width:80}">城市</th>
   <th lay-data="{field:'sign', width:160}">签名</th>
   <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
   
   <th lay-data="{field:'classify', width:80}">职业</th>
   <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
   <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>
   <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
  </tr>
 </thead>
</table>

第三步:写js,监听事件

<script>
layui.use('table', function(){
 var table = layui.table;
 
 var $ = layui.$, active = {
  getCheckData: function(){ //获取选中数据
   var checkStatus = table.checkStatus('idTest')
   ,data = checkStatus.data;
   layer.alert(JSON.stringify(data));
  }
 };
</script>

以上这篇layui获取选中行数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS闭包用法实例分析
Mar 27 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 #Javascript
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
基于layui数据表格以及传数据的方式
Aug 19 #Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 #Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php格式化json函数示例代码
2016/05/12 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python输出决策树图形的例子
2019/08/09 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
优秀求职信范文分享
2013/12/19 职场文书
学校安全责任书
2014/04/14 职场文书
限期整改通知书
2015/04/22 职场文书
小学思想品德教学反思
2016/02/24 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
解析Java中的static关键字
2021/06/14 Java/Android