Layui的表格点击事件

Layui是一个比较常用的插件,目前我接触到layui的模块有表格模块与弹出层模块
这里说的是单行数据的点击事件
Layui有一个方法是获取到选中行的方法如下代码
这个方法是选中单选框的方法复选框也有复选框的方法,可以基于责怪单选的方法里面写
这里就是选择到选中框然后处理选中行的数据。

layuiTable.on(‘row(tabDicName)’, function (obj) {
var data = obj.data.DicNameID;//获取点击行数据
//标注选中样式
obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);
//***单击选中单选框
obj.tr.find(‘div.layui-unselect.layui-form-radio’)[1].click();
});

一般选中行的数据获取的方法是这样的。然后获取到再去处理这条数据的子项。
所以就显得很麻烦。

var data = layuiTable.checkStatus(‘tabDicName’);//获取点击行数据

这里可以直接用再layui的方法里面搞事情。
可以直接再layui里面写需要实现的东西。
我这里需要实现的是提交这条数据到数据库查询我需要的东西。
由于是上面layui的方法就是获取选中行的可以先看一下他获取到的数据
我这里只需要他的这个ID很明显这里就获取到了这个ID
在这里插入图片描述
这里获取到了这个id然后直接写这个提交方法就可以了,这个方法只用于单选框。
不能用在复选框里面。

layuiTable.on(‘row(tabDicName)’, function (obj) {
var data = obj.data.DicNameID;//获取点击行数据
//标注选中样式
obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);

   //***单击选中单选框
   obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();

  tabDicNape = layuiTable.reload("tabDicNape", {
          url: "SelectDicNape",
          where: {
                DicNameID:data
            },
   });

这里把他提交到数据库去查询需要的东西就可以了。
我这里用他来实现这个功能,如下,点击字典名这边的数据去数据库查询如果查出来就可以显示出这条数据。我这个贷款银行这里是没有数据的我切到其他数据去
在这里插入图片描述
这里可以看到我切到这条其他应用收款类型可以看到字典项那边是有数据的
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44486126/article/details/91359855