您的位置:首页 > 产品设计 > UI/UE

关于使用layui获取表格复选框选中的数据的方法

2018-09-19 18:06 841 查看

使用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前端知识,所以有哪里说错了的,请大家指出哈)

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐