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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
jQuery动态添加
Apr 07 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
原生JS实现萤火虫效果
Mar 07 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JavaScript实现简单计算器功能
2019/12/19 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python常用小技巧总结
2015/06/01 Python
Python实现快速多线程ping的方法
2015/07/15 Python
详解supervisor使用教程
2017/11/21 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
挂科检讨书范文
2014/02/20 职场文书
保安队长职务说明书
2014/02/23 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
教学质量评估实施方案
2014/03/17 职场文书
植物生产学专业求职信
2014/08/08 职场文书
课外科技活动总结
2014/08/27 职场文书
2015年化验员工作总结
2015/04/10 职场文书
大国崛起日本观后感
2015/06/02 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js