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

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

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

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

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

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

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

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

效果如下图所示：

表格渲染完了，下面就是获取选中行的数据了，这里我们就通过点击获取按钮弹出提示框来看看效果。代码如下图所示：

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

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

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

如何获取layui表格选中行的数据相关推荐

ElementUI 获取el-table表格选中行信息及清除选中行
表格 <el-table :data="tableData" border style="width: 100%" ref="multipleT ...
获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...
datagridview 获取选中行号数据，判断是不是选中了一行
datagridview 获取选中行号数据,判断是不是选中了一行 if (cc.dataGridView1.SelectedRows.Count > 0)//小于等于0 为没有选中任何行 ...
关于如何获取复选框选中行的数据
前两天遇到一个需求,需要获取复选框选中行的数据再进行数据的操作,找了几篇文章,发现要么是获取不了,要么是只能获取单行,总之就是挺模糊的,不够细致,所以就自己通过摸索实现了,现在将这个方法进行整理分享给 ...
获取gridview当前选中行的内容
方法一:SelectedIndex 获取gridview当前选中行的内容 txtid.Text = GridView1.Rows(GridView1.SelectedIndex).Cells(1).T ...
layui表格编辑修改session数据
layui表格编辑修改session数据开发工具与关键技术: 作者:熊琪撰写时间:2019.7.06 Layui表格编辑,首先明白layui的表格属性,清楚其作用.Layu给人的一种感觉就是当你没 ...
若依的框架怎么样_基于bootstrapTable的若依框架如何获取表格选中行的整行数据？...
导语项目是基于若依框架写的,大部分的底层技术都是bootstrap. 最近在写一个项目的时候遇见一个需求,需要将子页面表格中选中的数据回传给父页面.为了减少网络请求,所以就准备直接使用子父页面传值. ...
bootstrapTable:获取选中行的数据
必须要有checkbox:true和singleSelect:true,然后就可以通过var row=$("#mytab").bootstrapTable('getSelectio ...
Layui表格实现显示空白行数据
在做餐饮的基础资料管理的时候,有些表格需要显示一条空白行,因为增删该三个控件按钮需要加载数据之后菜显示出来,如下所示: 上面表格最右边的控件按钮是用layui表格绑定列工具条实现的,代码如下: ...

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

如何获取layui表格选中行的数据相关推荐

最新文章

热门文章