关于使用layui获取表格复选框选中的数据的方法
使用layui获取表格选中的数据
今天在实现根据表格选中的内容进行一系列的操作,一下的内容是基于使用layui模块实现的。首先先简述比较简单的方法,在layui官方文档也是提到的方法。(本人文笔不好,很多东西写的不好,请多多见谅哈)
在使用方法渲染的方法实现表格头部工具栏的监听事件或者行数据的监听事件。
以下截图是关于表格头部工工具栏的监听事件:
(其中括号里面的test为table标签里面lay-filter属性的值,变量data的数据就是选中的数据)
二使用行工具栏获取行数据,不过该方法在这里说明一些而已,应该没有涉及表格选中与否的问题,以下截图便是关于行工具栏的获取行数据问题:
(其中test依然为table标签里面lay-filter属性的值,变量data的数据就是当前行的数据)
咳咳,前面只是粗略地和大家说了说layui模板table的工具栏获取选中数据的问题,然后以下就是我最想和大家分享的内容。
在页面只有一个表格的时候,我们需要对表格选中的数据进行一些增删改查的操作很容易实现。那如果一个页面加载了两个页面,然后需要通过一个按钮对两个两个表格的选中问题进行判断和获取选中的数据。首先如果还是实现table的头部工具栏肯定是不能实现该功能的。
首先我先把自己的需求说出来,这样好理解吧。
(项目需要对同一页面的两个表格进行操作,一、需要保证每个表格有且只能选中一条记录才能继续操作,其他情况都跳出错误提示告诉用户,二、需要获取选中的记录的数据,两个表格的选中数据都需要获取)
其实一开始我自己听懵逼的,后来找找论坛看看,有大神提及到可以去看看table的数据结构,这样就可以一目了然了。懵逼依然,然后半信半疑去看看table的数据结构,如下图所示:
(由上图所示可以看出table的数据结构,在cache下就是我页面中两个table的id,一个为outputTestId,另一个为testId,这个根据自己的定义而定,不是唯一的。
所示如果需要获取table的所有数据,可以这样写:
var data = table.cache.testId;(testId为自己定义的table的id)
)
看到这里 我们只是知道了怎么获取table的所有数据,可是怎么清楚这些数据中哪些数据是选中的记录呢。别急,看到以下这张图片说明你就会明白了。
(可知,其实每一条记录都有都有一个LAY_CHECKED属性来标记本条记录是不是被选中了,看到这里相信大家都明白了吧)
只要通过判断每条记录的LAY_CHECKED属性即可获取到选中的数据了。知道了,前面提到的需求就so easy了。
(注:不懂的,可以联系我哈。然后还有更好方法的话希望大家多多提出,我保证虚心学习!以前没有系统学习过web前端知识,所以有哪里说错了的,请大家指出哈)
阅读更多- 关于layui2.2.x版本使用table表格,刷新后table数据消失的问题
- 关于Java Web使用的DataTables插件获取所有数据以及表格刷新
- 获取带复选框的easyui表格选中的行数据
- layui 监听表格复选框选中值的方法
- Layui数据表格之获取表格中所有的数据方法
- 关于Jquery中的$.each获取各种返回类型数据的使用方法
- 获取当前年份前后各五年的数据与双击选中方法的使用
- iOS 关于UICollectionView选中状态,当使用reloadData方法时出现数据的问题?
- layui从数据库中获取复选框的值并默认选中方法
- 关于Jquery中的$.each获取各种返回类型数据的使用方法
- 关于使用jspSmartUpload控件无法获取表单数据
- Windows Phone Dev Notes-关于WP7 OS 7.0和7.1的加速度传感器数据获取方法差异
- C语言使用scanf函数获取数据后,使用getchar()无法获得字符的处理方法
- 单击选中GridView 或 HTML 表格的某行,并获取该行的数据。。。。
- 关于JQuery获取表格中任意单元格的数据问题
- JSP基础语法之一:Scriptlet使用、简单的JSP获取表单数据再输出表格
- 分页解决方案 之 QuickPager的使用方法(PostBack分页、自定义获取数据)
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- 关于使用cspreadsheet读写EXCEL表格数据的问题
- 分页解决方案 之 QuickPager的使用方法(URL分页、自动获取数据)