layui表格监听获取行，可以ID叠加方法

最新推荐文章于 2022-09-25 15:47:34 发布
最新推荐文章于 2022-09-25 15:47:34 发布
阅读量950 收藏 1
点赞数
分类专栏： Mvc 文章标签： layui表格监听获取行，可以ID叠加方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44546509/article/details/94971990
版权

 

开发工具与关键技术：MVC

作者：Mr_恺

撰写时间：2019年7月5日

 

   Layui中table模块表格中有一个自带的监听行事件，我们选中哪一行就能获取哪一行的数据，且不能ID叠加，ID叠加是第一次我选中这一行，就获取到这行的ID，第二次我选中另外一行，就获取到第一次的ID叠加我这此选中的ID，以此类推。

   正常的监听是选中哪行就获取哪行的数据：

我选中一行获取它当前一行的数据和ID：

在点击另一行，它的数据不会叠加，就是获取当前的数据：

 

       想让ID叠加，我们在监听行事件里面给它一个点击事件，在点击事件里面获取数据或ID，这样子就能实现叠加啦：

这样第一次获取是当前的行数据：

 

再点击另一行，它的ID会叠加，同时获取到两个ID：

看了没有，第一个ID 是37又获取了一次，第二个ID是29，我再选中一行，ID又会叠加，以此类推下去。

如果想在点击事件里获取行ID不叠加，那我们就把点击事件写在页面加载事件，不要写在表格监听事件里，然后通过设置一个全局变量，在表格监听事件获取行的值赋给全局变量，然后在点击事件获取全局变量的值就ojbk啦

 

愷訫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui 监听表格复选框选中值的方法
10-18
总结，layui监听表格复选框选中值的方法主要包括：初始化表格数据、监听复选框事件、处理选中和取消操作，以及异步请求后台。通过这种方式，我们可以灵活地根据用户的交互更新数据并传递给服务器，实现了动态数据...
layui中获取选中行的id_layui下的table获取选中行数据
weixin_39603476的博客
12-20 2371
静态html：ID111商品图商品标题商品价格商品品牌产品系列所属供应商ID111111 商品标题1¥100商品品牌1产品系列1所属供应商1ID2222 商品标题2¥200商品品牌2产品系列2所属供应商2js部分：获取全部选中的数据：var selectData =layui.table...
layui动态添加input_layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用...
weixin_33842969的博客
12-30 801
起因本人是在一家互联金融公司，因项目需求 要实现如上图的效果 从网上查阅了很多资料 ，无果而终，最终想到了 动态更改id 避免id重复 调用失败保守派 --- 行内调用付息日期 :增加第1次付息日期 :切记 要引入 laydate.js 这里用到的是独立版本的 具体用法 可以参照官网文档//付息日期fuxiTime();function fuxiTime() {if(!$(".fuxiT...
layui获取Table表格选中的id(全选/取消勾选):
SunPeng的博客
09-25 3650
layui获取Table表格选中的id(全选/取消勾选):
Layui 获取表格id
a5252145的博客
07-05 1万+
Layui 获取表格id 第一步：table表格要有 lay-filter 属性 <table class="app-table layui-table" id="reportTable" lay-filter="reportTable" lay-data="{id: 'reportTable'}"></table> 第二步：通过 table.checkStat...
Layui table 行事件或单元格编辑事件中获取行索引或行号+更新行数据方法
SummerGao
04-19 6617
//监听行的点击事件 table.on('row(tableFilter)', function (obj) { //获取当前行的索引 var rowIndex = $(obj.tr).attr("data-index"); //更新指定行某字段显示值 $(".layui-table-box tbody tr[data-index=...
Layui表格监听行单双击事件讲解
12-13
而layui表格里有许多的事件监听，比如监听行的单双击事件，可利用行的单双击事件实现很多我们想要的功能，比单击某条数据可以进行修改、删除操作，双击某条数据调出到其他表中，接下来就讲讲layui表格里的监听行的单...
Layui数据表格之获取表格中所有的数据方法
10-18
今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui事件监听的实现(表单和数据表格)
10-16
2. **表格渲染与事件监听**：使用`table.render`方法渲染表格，并通过`toolbar`参数指定工具栏ID。然后，使用`table.on`监听工具栏事件，例如： ```javascript layui.use('table', function() { var table = ...
Layui初始化多个非固定ID选择器的模块。
Re1997的博客
07-11 754
前言 在封装layui部分插件时，我发现文档中并未描述，同时初始化多个同类型插件，故有此文。 正文 要实现初始化多个同类型插件有两种方法：一种是each，一种是map，下方代码是以layui调色板模块为示例。废话不多说，直接上代码。 代码 写法一： $('.color-btn').each(function(){ var _this = $(this); colorpicker.render({ elem: this ,predefine: true
layui-table获得当前行的上/下一行数据的例子
12-13
此方法主要是获得Layui当前行数据的上一行数据，或者下一行数据,os旧的jquery选择器 se选择器 nse新的jquery选择器 /** * * @param obj layui-table的行数据对象 * @param number 要查找的行距离当前行距离，以当前行为准向上一行为-,向下为+ * @param filedName 要查找的filed * @returns {string} 查找filed的值 */ function getRowData(obj, number, filedName) { var se = obj.tr.selector; var
layui表格监听checkbox是否选中并获取选中行的数据
ren593669257的博客
06-21 2万+
table.on('checkbox(table-id)', function(obj){ console.log(obj.checked); //当前是否选中状态 console.log(obj.data); //选中行的相关数据 console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one console.log(ta...
layui中获取选中行的id_layui 监听select选择 获取当前select的ID名称方法
weixin_29205061的博客
01-27 2200
监听select选择form.on('select(filter)', function(data){console.log(data.elem); //得到select原始DOM对象console.log(data.value); //得到被选中的值console.log(data.othis); //得到美化后的DOM对象});获取自定义属性data.elem.getAttribute("da...
Layui事件监听
weixin_57785089的博客
06-08 2919
layui监听事件
layui中form.on监听checkbox事件并获取当前行的id值
热门推荐
gdali的专栏
07-10 4万+
//form监听事件form.on('checkbox(status)', function(obj){    //当前元素    var data = $(obj.elem);    //遍历父级tr，取第一个，然后查找第二个td，取值    var id = data.parents('tr').first().find('td').eq(1).text();    var check = o...
LayUI事件监听获取自定义属性的值
hotlinhao的专栏
02-03 4587
form.on('',function(data){ data.elem.getAttribute('data-url'); });
layui中table监听单元格_关于LayUI中表格行数据监听记录
weixin_34928063的博客
02-06 1886
关于LayUI中表格行数据监听记录table.on("控件"(“表格的绑定名字”))对于表格中自定义按钮监听toolbar配置table.on(“控件”(“表格的绑定名字”))这里控件就是row，点击表格对应行，获取对应数据table.on('row(useruv)', function (obj) {//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应...
关于LayUI中表格行数据监听记录
l3098815201的博客
06-09 1937
关于LayUI中表格行数据监听记录table.on("控件"(“表格的绑定名字”)) table.on(“控件”(“表格的绑定名字”)) 这里控件就是row，点击表格对应行，获取对应数据 table.on('row(useruv)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据
layui表格获取id传值
最新发布
05-16
在 layui 表格中，可以通过监听表格的工具条事件（`toolbar`），获取选中行的数据，并从中提取出需要的 id 值，再将其传递给后台进行处理。 具体实现步骤如下： 1. 在表格的 `toolbar` 中添加一个按钮，用于触发事件： ```javascript toolbar: '#toolbarDemo', ``` ```html <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getSelected">获取选中行id</button> </div> </script> ``` 2. 监听表格的工具条事件，在事件处理函数中获取选中行的数据，并从中提取出需要的 id 值： ```javascript table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'getSelected': var data = checkStatus.data; var ids = []; layui.each(data, function(index, item){ ids.push(item.id); }); console.log(ids); // 打印选中行的 id 值 break; }; }); ``` 在上述代码中，`checkStatus.data` 表示获取当前选中的数据行，`item.id` 表示获取每行数据中的 id 值。 3. 将获取的 id 值传递给后台进行处理。 注意：在传递 id 值时，需要将其转换为字符串或数组形式，具体根据后台接口的要求进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值