使用Layui數(shù)據(jù)表格實(shí)現(xiàn)行工具事件與Layui表單彈框與數(shù)據(jù)回填具體步驟如下：
創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴！
步驟一：布置行工具欄樣式與數(shù)據(jù)表格初始化，代碼如下:
重慶分公司
重慶分公司
var listEnquiryQuote;//詢價(jià)記錄表格
layui.use(['table','form','layer'], function () {
//詢價(jià)記錄表格初始化
listEnquiryQuote = table.render({
elem: '#EnquiryQuote'
, method: 'post'
, url: '/Purchase/AwaitQueryPrice/SelectEnquiry' //數(shù)據(jù)接口
, id: 'idEnquiryQuote'
, page: true //開啟分頁(yè)
, cols: [[ //表頭
{ type: 'radio' }
, { field: 'EnquiryID', title: '詢價(jià)ID', hide: true }
, { field: 'SupplierName', title: '供應(yīng)商名稱', width: 180 }
, { field: 'CompanyName', title: '公司英文名', width: 180 }
, { field: 'SupplierID', title: '供應(yīng)商ID', hide: true }
, { field: 'ProductName', title: '產(chǎn)品名稱', width: 90 }
, { field: 'Model', title: '型號(hào)', width: 120 }
, { field: 'Trademark', title: '原廠品牌', width: 90 }
, { field: 'PrimaryNumber', title: '原廠料號(hào)', width: 90 }
, { field: 'QualityName', title: '品質(zhì)', width: 60 }
, { field: 'QualityID', title: '品質(zhì)ID', hide: true }
, { field: 'UnitName', title: '單位', width: 60 }
, { field: 'UnitID', title: '單位ID', hide: true }
, { field: 'FPackaging', title: '封裝', width: 90 }
, { field: 'BPackaging', title: '包裝', width: 60 }
, { field: 'DateCodeS', title: '生產(chǎn)日期', width: 105 }
, { field: 'Describe', title: '描述', width: 150 }
, { field: 'DeliveryTime', title: '貨期', width: 60 }
, { field: 'MinOrder', title: '最小訂購(gòu)量', width: 105 }
, { field: 'QuantityDemanded', title: '需求量', width: 80 }
, { field: 'TaxPoint', title: '稅點(diǎn)', width: 60 }
, { field: 'Quote', title: '報(bào)價(jià)', width: 70 }
, { field: 'EnquiryDateS', title: '詢價(jià)日期', width: 105 }
, { field: 'AdoptQuantity', title: '采納量', width: 80 }
, { fixed: 'right', title: '操作', toolbar: '#barDemo2', width: 120 }
]]
, limit: 10
, response: {
statusName: 'success' //規(guī)定數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
, statusCode: true //規(guī)定成功的狀態(tài)碼，默認(rèn)：0
, countName: 'totalRows' //規(guī)定數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
}
, request: {
pageName: 'curPage' //頁(yè)碼的參數(shù)名稱，默認(rèn)：page
, limitName: 'pageSize'
}
});
});效果圖如下：
步驟二：監(jiān)聽(tīng)行點(diǎn)擊事件：
layui.use(['table','form','layer'], function () {
//監(jiān)聽(tīng)詢價(jià)記錄行工具事件
table.on('tool(EnquiryQuote)', function (obj) {
var data = obj.data;
//修改
if (obj.event === 'compile') {
if (data.AdoptQuantity == null || data.AdoptQuantity == 0) {
//彈出修改詢價(jià)記錄模態(tài)框
layer.open({
type: 1,
title: '修改詢價(jià)記錄',
area: ['950px', '600px'],
content: $('#UpdateEnquiry'), //這里content是一個(gè)DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響
});
} else {
layer.msg('已有采購(gòu)單采納該詢價(jià)，不得編輯！', { icon: 0 });
}
//重置
$("#reset4").click(function () {
//數(shù)據(jù)回填
form.val("UpdateEnquiry", data);
form.val("UpdateEnquiry", {
"DateCode": data.DateCodeS
})
if (data.SupplierID != null) {
//給表單賦值
form.val("UpdateEnquiry", {
"State": "true"
})
} else {
//給表單賦值
form.val("UpdateEnquiry", {
"State": ""
})
}
});
$("#reset4").click();
}
});應(yīng)注意的表單必須有l(wèi)ayui-form類與lay-filter屬性，本文獻(xiàn)lay-filter屬性值為UpdateEnquiry，可自定義
把回填事件寫入重置按鈕點(diǎn)擊事件這樣設(shè)置的好處是在點(diǎn)擊重置是在點(diǎn)擊重置時(shí)可以重新回填數(shù)據(jù)，可以給用戶選擇的空間，效果圖如下：
以上這篇Layui表格行工具事件與數(shù)據(jù)回填方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
