当前位置:主页 > javascript教程 > layui获取选中行数据的实例讲解

layui获取选中行数据的代码详解

发布:2019-09-15 11:08:38 90


本站收集了一篇相关的编程文章,网友林烨赫根据主题投稿了本篇教程内容,涉及到layui、选中行、数据、layui获取选中行数据的实例讲解相关内容,已被934网友关注,内容中涉及的知识点可以在下方直接下载获取。

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

第一步: 在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获取选中行数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。


参考资料

相关文章

  • Vue2.x中的父组件传递数据至子组件的实例内容

    发布:2020-05-28

    这篇文章主要介绍了Vue2.x中的父组件数据传递至子组件的方法,需要的朋友可以参考下


  • Python连接Azure Storage进行数据交互的实现

    发布:2023-04-12

    本文主要介绍了Python连接Azure Storage进行数据交互的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • Mybatis整合达梦数据库的完整步骤记录

    发布:2023-04-18

    作为国产数据库,达梦做的不错,提供的迁移工具也相当不错,下面这篇文章主要给大家介绍了关于Mybatis整合达梦数据库的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下


  • 详解Flask数据库的连接与使用

    发布:2023-03-25

    这篇文章主要为大家想想介绍了Python中Flask数据库的连接与使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下


  • Pandas数据分析常用函数的使用

    发布:2023-03-07

    本文主要介绍了Pandas数据分析常用函数的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • Python从SQL型数据库读写dataframe型数据的方法总结

    发布:2019-06-06

    这篇文章主要介绍了Python实现从SQL型数据库读写dataframe型数据的方法,涉及Python基于pandas的数据库读写相关操作技巧,需要的朋友可以参考下


  • JavaScript转换数据库DateTime字段类型的实例详解

    发布:2020-01-07

    下面小编就为大家带来一篇JavaScript转换数据库DateTime字段类型方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Python之sklearn数据预处理中fit(),transform()与fit_transform()的区别

    发布:2023-04-23

    这篇文章主要介绍了Python之sklearn数据预处理中fit(),transform()与fit_transform()的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


网友讨论