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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
js中跨域方法原理详解
Jul 19 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
js实现随机圆与矩形功能
Oct 29 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php curl_init函数用法
2014/01/31 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python内置模块turtle绘图详解
2017/12/09 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
详解Python 最短匹配模式
2020/07/29 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
车间核算员岗位职责
2014/07/01 职场文书
2015年党建工作总结
2015/03/30 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP