Layui监听事件

Layui监听事件

开发工具与关键技术：VS   MVC、SQL、JS
撰写时间：2019/5/25

表格事件监听可以实现，点击当前的数据，获取到当前的数据，赋值给想显示数据的from表单，或其他表格。表格事件监听的好处那么多，怎样可以实现简单易懂的事件监听呢？额！还是通过layui插件来实现这个监听功能，layui插件提供了监听多种事件。

监听复选框选择：点击复选框时触发，回调函数返回一个object参数

table.on(‘checkbox(test)’,function(obj){

console.log(obj.checked);//当前是否选中状态

console.log(obj.data);//选中行的相关数据

console.log(obj.type);//如果触发的是全选，则为：all，如果触发的是单选，则为：one

});

监听行的单击或双击事件：row（单击）、rowDoub（双击）
一个简单的监听行的单击事件：

t

able.on(‘row(test)’,function(obj){ //test是table原始容器的属性
lay-filter=“对应的值”

    console.log(obj.tr);//得到当前行元素对象

console.log(obj.data);//得到当前行数据

//obj.del();//删除当前行

//obj.update(fields);//修改当前行数据
});

无论layui监听的是什么事件，都要在html布局的table标签上加上layui-filter=“”的对应值，否则监听事件就会失效。例如：<table id="demo" layui-filter="test"></table>
通过layui渲染出数据表格之后，监听表格行的点击事件，把表格的数据赋值绑定到from表单中；其监听绑定的效果图如下：（图片上涉及的信息属于虚构的测试数据）

监听绑定from的代码如下：

layuiTable.on('row(TabSupplierInformation)', function (raot) {

                   
var data = raot.data;//获取点击行数据                   

                   
//表格数据 绑定到from表单中

                   
$("#SupplierNum").val(data.SupplierNum);//绑定编号

                   
$("#SupplierName").val(data.SupplierName);//绑定名称

                   
$("#SupplierBusiness").val(data.SupplierBusiness);//绑定主营业务          

                   
$("#SupplierTele").val(data.SupplierTele);//绑定电话  

                   
$("#SupplierAddress").val(data.SupplierAddress);//绑定地址  

                   
$("#SupplierWeb").val(data.SupplierWeb);//绑定网站  

                   
$("#SupplierLinkname").val(data.SupplierLinkname);//绑定联系人  

                   
$("#SupplierFax").val(data.SupplierFax);//绑定传真 

                   
$("#SupplierPhone").val(data.SupplierPhone);//绑定手机  

                   
$("#SupplierMailbox").val(data.SupplierMailbox);//绑定邮箱  

                   
$("#SupplierRemark").val(data.SupplierRemark);//绑定备注  

                   
$("#PinyinCode").val(data.PinyinCode);//拼音码

                   
$("#WarehouseAddress").val(data.WarehouseAddress);//库房地址

                   
$("#WarehousePhone").val(data.WarehousePhone);//库房电话

                   
$("#SupplierTax").val(data.SupplierTax);//税号

                  
$("#SupplierMoney").val();//应付款                  

                });

选中一行数据，显示另外一个表格数据，即表2的数据，根据表1的数据进行显示。这种情况同样可以根据行的单击事件来实现筛选数据，在监听事件中添加表2得重载事件即可。
//监听行单击事件（双击事件为：rowDouble）

   layuiTable.on('row(tabNotice)', function (rate) {
      var data = rate.data;//获取点击行数据
      //标注选中样式
      rate.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
      var noticeID = data.NoticeID;
     //公告查询附件  reload（）重载表格
 TabFiles =layuiTable.reload('tabFiles', {
                            url: '/SystemManagement/IssuanceNotice/SelectFileAll',
                            page: {
                                curr: 1
                            },
                            where: {//设定异步数据接口的额外参数，比如设置多条件查询的参数
                                noticeId: noticeID
                            },
                        });
                    });