Layui数据表格各种的事件

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();
})
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui是一款轻量级的前端UI框架,其中的数据表格组件可以快速构建出强大的表格功能。使用Layui数据表格,你可以通过简单的配置实现数据的分页、排序、筛选、编辑、删除等功能。以下是Layui数据表格的基本使用流程: 1. 引入Layui框架和数据表格模块。 2. 定义表格列的数据格式和表头信息。 3. 创建表格对象,并配置数据接口、数据格式、分页等参数。 4. 在HTML页面中定义一个div容器,用于展示表格。 5. 调用表格对象的render方法渲染表格。 6. 在数据接口返回数据时,调用表格对象的reload方法刷新表格。 以下是一个简单的Layui数据表格示例代码: HTML代码: ``` <div id="table"></div> ``` JavaScript代码: ``` // 引入Layui框架和数据表格模块 layui.use(['table'], function(){ var table = layui.table; // 定义表格列的数据格式和表头信息 var cols = [[ {field: 'id', title: '编号'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {field: 'gender', title: '性别'} ]]; // 创建表格对象,并配置数据接口、数据格式、分页等参数 table.render({ elem: '#table', url: '/api/users', cols: cols, page: true, limit: 10 }); }); ``` 在上面的示例代码中,我们定义了一个包含编号、姓名、年龄、性别四个列的表格,并配置了数据接口为/api/users,分页每页显示10条数据。在页面加载时,表格会自动从接口中获取数据并渲染出来。如果数据发生变化,可以调用表格对象的reload方法刷新表格
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值