1、 监听行单击事件:
在layui数据表格渲染完成之后,我们可以通过 row 这个属性来监听表格中的行点击事件,其中(obj)中包含了你所点击的这一行的所有的属性和数据,可以设置一个data用来接收obj中的数据!
这样就可以获取到你所点击的行的所有的数据了,以及设置选中行的样式、勾选复选框等等的效果,也可以给这一行的数据的某一个值赋值给某一个标签$("#shoji").val(obj.data.ProvPhone)!
table.on('row(tabsupplier)', function (obj) {
var data = obj.data;//获取点击行数据
obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click"); //标注选中行样式
obj.tr.find("div.layui-unselect.layui-form-checkbox")[0].click();//选中行,勾选复选框
$("#gongyingshangmingcheng").val(obj.data.ProvisionCompany);//名称
$("#dianhua").val(obj.data.ProvPhone);
$("#lianxiren").val(obj.data.Contact);
$("#shoji").val(obj.data.ProvPhone);
});
2、 监听行双击事件:
双击事件的用法和上面的点击事件也是一样的,不同的只是 rowDouble 属性而已!还有勾选复选框和勾选单选框的用法也是一样的,只需要把checkbox 改成radio就可以了。
table.on('rowDouble(tabTitles)', function (obj) {
var data = obj.data;//获取点击行数据
var CommID = obj.data.CommID;
obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click");//标注选中行样式
obj.tr.find("div.layui-unselect.layui-form-radio")[0].click();//选中行,勾选单选框
UpdateTemporayModels(CommID);
});
3、 工具栏点击事件:
在设置工具栏的点击事件之前,我们需要先在静态表格中设置对应的lay-event='level’值,也可以在动态表格中的表头添加 event: 'levels’值,然后就可以给对应的工具栏的点击事件中编写需要执行的代码了!
layuiTable.on('tool(tabsizezu)', function (obj) {
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (layEvent === 'level'){……}
if (layEvent === 'levels'){……}
if (layEvent === 'Update'){……}
});
4、 复选框点击事件:
Layui表格中的复选框默认是可以勾选,但是大多数时候我们需要的是勾选复选框之后的获取到相对应的值,所以我们就需要监听复选框的点击事件来获取相对应的值!
首先我们需要在layui表格加载和初始化的时候加载form元素:layui.use([‘layer’, ‘table’, ‘element’, ‘form’], function () {}),以及在相对应的复选框的标签内添加上(lay-filter=“formDemo”)属性;声明一个变量用来接收当前复选框的值var checkboxVail = $("#ToVoNo").val();
判断当前的值是true还是false,点击一下就改变当前的值,这样就可以实现复选框的值根据勾选状态而不断切换的效果!
form.on('checkbox(formDemo)', function () {
if (checkboxVail == 'true') {
$("#ToVoNo").val("false");
checkboxVail = $("#ToVoNo").val();
}
else if (checkboxVail == 'false') {
$("#ToVoNo").val("true")
checkboxVail = $("#ToVoNo").val();
}
})
5、 单选框点击事件:
在HTMl中的单选框的的标签内添加上lay-filter="bbb"属性,当然也需要在在layui表格加载和初始化的时候加载form元素!
声明一个全局变量用来接收当前点击的单选框的值,也可以在里面放入需要点击单选框之后所执行的代码或者方法!
form.on('radio(bbb)', function () {
sex = $(this).val();
SizeStatistics();
})