如何获取layui表格选中行的数据

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具和关键技术:Visual Studio 2015,layui插件、JavaScript

作者:金建勇

撰写时间:2019年7月26日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在项目中有很多涉及到表格的模块,有时候当你需要保存数据的时候,而这些数据都在表格中你却获取不到,这就让人很苦恼了,所以下面就讲下如何获取layui表格中选中行的数据,

注意这里只是layui表格的获取方法。获取方法肯定也就是layui插件自带的方法,只是再详细说明一下,用到layui表格和方法,那插件肯定是少不了的,下面就是需要用到的插件:

 一个样式插件 /layui.css 和一个JS插件 /layui.all.js。引用完这两个插件后就可以开始下面的实例了。

 

1、既然是获取layui表格的数据,那就得先把表格渲染出来。代码如下图所示:

 

页面布局就是这样,因为没有渲染表格,页面也就只能看到一个按钮,所以接下来就去到控制器写个查询方法,代码如下图所示:

如何获取layui表格选中行的数据_第1张图片

 

这就是一个简单的单表查询,所以代码也很简单,写完查询方法之后就再回到视图去写渲染表格的方法,代码如下图所示:

如何获取layui表格选中行的数据_第2张图片

 

图中代码就是很基本的渲染表格,因为要获取行的数据,所以下面就加了监听行的单击事件,

效果如下图所示:

如何获取layui表格选中行的数据_第3张图片
表格渲染完了,下面就是获取选中行的数据了,这里我们就通过点击获取按钮弹出提示框来看看效果。代码如下图所示:

如何获取layui表格选中行的数据_第4张图片

代码中用到了checkStatus就是layui自带的获取行数据的方法。这里只是获取了单条数据,如果你要获取多条数据,将单选框改为复选框当然也是可以的。下面看看效果,如下图所示:

如何获取layui表格选中行的数据_第5张图片

效果就是这样了,只是换了给形式表现出来,

通过这个例子就可以获取到layui表格选中行的数据了,例子可供大家学习和参考。

 

你可能感兴趣的:(知识点)