Layui表格行工具事件与数据回填方法

使用获得数据表格实现行工具事件与获得表单弹框与数据回填具体步骤如下：

步骤一：布置行工具栏样式与数据表格初始化，代码如下：

脚本类型=' text/html ' id=' bardemo 2 ' a class=' layui-BTN layui-BTN-xs layui-BTN-normal ' lay-event=' compile '编辑/a a class=' layui-BTNlayui-BTN-xs layui-BTN-normal ' lay-event=' delete '删除/a/脚本var listEnquiryQuote//询价记录表格layui.use(['table '，' form '，' layer']，function () {//询价记录表格初始化listEnquiryQuote=table。render({ elem : ' # EnquiryQuote '，method: 'post '，URL : '/Purchase/AwaitQueryPrice/select query '//数据接口，id: 'idEnquiryQuote '，第：页true //开启分页，cols: [[ //表头{ type: 'radio' }，{ field: 'EnquiryID '，title: '询价' ID '，hide: true }，{ field: 'SupplierName '，title: '供应商名称，宽度： 180 }，{ field: 'CompanyName '，title: '公司英文名，宽度： 180 }，{ field: 'SupplierID '，title: '供应商' ID '，hide: true }，{ field: 'ProductName '，title: '产品名称，宽度： 90 }，{ field: 'Model '， 标题： '型号，宽度： 120 },{字段： '商标，标题： '原厂品牌，宽度： 90 }，{ field: 'PrimaryNumber '，title: '原厂料号，宽度： 90 }，{ field: 'QualityName '，title: '品质，宽度： 60 }，{ field: ' QualityID '，title: '品质' ID '，hide: true }，{ field: 'UnitName '，title: '单位，宽度： 60 }，{ field: 'UnitID '，title: '单位' ID '，hide: true }，{ field: ' FPackaging '，title: '封装，宽度： 90 }，{ field: ' BPackaging '，title: '包装，width: 60 }，{ field: 'DateCodeS '， 标题： '生产日期，宽度： 105 },{字段： '描述，标题： '描述，宽度： 150 }，{ field: 'DeliveryTime '，title: '货期，宽度： 60 }，{ field: 'MinOrder '，title: '最小订购量，宽度： 105 },{字段： '数量要求，标题： '需求量，宽度： 80 }，{ field: 'TaxPoint '，title: '税点，宽度： 60 }，{ field: 'Quote '，title: '报价，宽度： 70 }，{ field: ' EnquiryDateS '，title: '询价日期，宽度： 105 }，{ field: '采用数量，标题： '采纳量，宽度： 80 },{固定： '右侧，标题： '操作，toolbar: '#barDemo2 '，width: 120 } ]，limit: 10，response : { status name : ' success '//规定数据状态的字段名称，默认：代码，statusCode: true //规定成功的状态码，默认：0，countName: 'totalRows' //规定数据总数的字段名称，默认：count }，请求： {页面名称： ' curPage '//页码的参数名称，默认：page，LimitName : ' PageSize ' } })； });效果图如下：

步骤二：监听行点击事件：

Layui.use (['table '，' form '，' layer']，function(){//监听工具事件table.on ('tool (inquire quote)')，function(obj){ vardata=obj . data；//修改if (obj。事件===' compile') {if(数据。收养数量==null | |数据。采用quantity==0){//修改查询记录图层的模式框.打开({ type: 1，Title: '修改查询记录'，Area : ['950 px '，' 600 px']，content 3360 $(' # Update Inquiry ')，//这里，Content是一个DOM，注意：最好将这个元素存储在主体的最外层，否则可能会受到其他相对元素的影响})；} else {layer.msg('此RFQ已被现有采购订单采用，无法编辑！'，{ icon : 0 })；}//reset $ ('# reset4 ')。点击(function(){//数据回填form.val('更新查询'，数据)；form . val(' updatequery '，{ 'DateCode':数据。DateCodeS }) if(数据。供应商ID！=null) {//赋值form.val ('updateinquiry '，{ ' state ' : ' true ' })} else {//赋值form.val ('updateinquiry '，{ ' state ' : ' ' })})；$('#reset4 ')。单击()；} });需要注意的是，表单必须有layui-form类和lay-filter属性，本文档中lay-filter的属性值为UpdateEnquiry，可以自定义

将回填事件写入重置按钮点击事件。此设置的优点是，当您单击重置时，您可以再次回填数据，并给用户选择的空间。渲染如下：

以上的Layui表线工具事件和数据回填方法都是边肖分享的内容，希望能给大家一个参考和支持。