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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php强制运行广告的方法
2014/12/01 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
详解Django admin高级用法
2019/11/06 Python
python破解同事的压缩包密码
2020/10/14 Python
最新pycharm安装教程
2020/11/18 Python
python 实现超级玛丽游戏
2020/11/25 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
物业接待员岗位职责
2015/04/15 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL