??Layui數(shù)據(jù)表格模塊主要通過各類事件響應(yīng)工具欄操作、單元格編輯或點(diǎn)擊等交互操作，本文學(xué)習(xí)table數(shù)據(jù)表格模塊中的主要事件及處理方式。
??頭部工具欄事件。通過代碼“table.on(‘toolbar(test)’, function(obj))”獲取lay-filter屬性為test的數(shù)據(jù)表格的頭部工具欄事件，頭部工具欄是指在數(shù)據(jù)表格上方通過toolbar屬性設(shè)置的工具欄，其中設(shè)置了lay-event屬性的按鈕或其它元素點(diǎn)擊時(shí)會(huì)觸發(fā)頭部工具欄事件，在事件響應(yīng)函數(shù)中的obj.event獲取觸發(fā)的具體事件名稱，也即按鈕或其它元素中l(wèi)ay-event屬性設(shè)置的值，獲取到具體事件后，就可以執(zhí)行相應(yīng)的操作了。設(shè)置并獲取lay-event的示例代碼及截圖如下所示：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="newdata">新增數(shù)據(jù)</button>
<button class="layui-btn layui-btn-sm" lay-event="insertdata">插入數(shù)據(jù)</button>
<button class="layui-btn layui-btn-sm" lay-event="deldata">刪除數(shù)據(jù)</button>
</div>
</script>
<table id="demo" lay-filter="test"></table>
<script>
layui.use(['table','layer'], function(){
var table = layui.table;
var layer = layui.layer;
table.render({
elem: '#demo'
,url: 'http://localhost:5098/ECData/DataTableList'
,page: true
,width:800
,toolbar:"default"
,title:"環(huán)境監(jiān)測(cè)數(shù)據(jù)表格"
,size:"sm"
,totalRow:true
,defaultToolbar:["print","exports"]
...
});
table.on('toolbar(test)',function(obj)
{
layer.alert(obj.event);
})
});
</script>
??單元格工具事件。通過代碼“table.on(‘tool(test)’, function(obj))”獲取lay-filter屬性為test的數(shù)據(jù)表格的單元格工具事件，后者是指表格的單元格中設(shè)置了lay-event屬性的按鈕或其它元素觸發(fā)的事件，獲取到具體事件后，就可以對(duì)該行數(shù)據(jù)執(zhí)行相應(yīng)的操作。設(shè)置并獲取lay-event的示例代碼及截圖如下所示：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="newdata">新增數(shù)據(jù)</button>
<button class="layui-btn layui-btn-sm" lay-event="insertdata">插入數(shù)據(jù)</button>
<button class="layui-btn layui-btn-sm" lay-event="deldata">刪除數(shù)據(jù)</button>
</div>
</script>
<table id="demo" lay-filter="test"></table>
<script>
layui.use(['table','layer'], function(){
var table = layui.table;
var layer = layui.layer;
table.render({
elem: '#demo'
,url: 'http://localhost:5098/ECData/DataTableList'
,page: true
,width:1000
,toolbar:"default"
,title:"環(huán)境監(jiān)測(cè)數(shù)據(jù)表格"
,size:"sm"
,totalRow:true
,defaultToolbar:["print","exports"]
,cols: [[
{type:'radio'}
,{field: 'id', title: 'ID',totalRowText: '合計(jì)'}
,{field: 'createTime', title: '創(chuàng)建時(shí)間'}
,{field: 'humidity', title: '濕度',sort:true,edit:'textarea',totalRow:true}
,{field: 'temperature', title: '攝氏溫度',sort:true,totalRow:true}
,{field: 'temperature', title: '華氏溫度',sort:true,templet:function(d){ return d.temperature*9/5+32}}
,{field: 'flameValue', title: '火焰檢測(cè)值',totalRow:true}
,{field: 'mqValue', title: '煙霧檢測(cè)值',templet:"#redalert"}
,{templet:"#toolbarDemo"}
]]
});
table.on('tool(test)',function(obj)
{
layer.alert('ID = '+obj.data.id+',event = '+obj.event);
})
});
</script>
??單選框事件。開啟單選框列后，單擊某行的單選框，會(huì)觸發(fā)單選框事件，通過“table.on(‘radio(test)’, function(obj))”代碼能夠獲取lay-filter屬性為test的數(shù)據(jù)表格的單選框事件。獲取單選框事件的示例代碼及截圖如下所示。測(cè)試過程中發(fā)現(xiàn)主要是通過點(diǎn)擊單選框觸發(fā)單選框事件，當(dāng)已經(jīng)選中某一行，再點(diǎn)擊另一行的單選框時(shí)并不會(huì)觸發(fā)checked為false的事件，而是觸發(fā)的新行的單選框事件。
table.on('radio(test)', function(obj)
{
layer.alert('ID = '+obj.data.id+',checked = '+obj.checked);
});
??復(fù)選框事件。開啟復(fù)選框列后，勾選或取消勾選某行的復(fù)選框，勾選或取消勾選全選框，都會(huì)觸發(fā)復(fù)選框事件，通過“table.on(‘checkbox(test)’, function(obj))”代碼能夠獲取lay-filter屬性為test的數(shù)據(jù)表格的復(fù)選框事件。獲取復(fù)選框事件的示例代碼及截圖如下所示。
// 勾選或取消勾選某行的復(fù)選框時(shí)，data為當(dāng)前行值，type為one
// 勾選或取消勾選全選框時(shí)，data為空，type為all
table.on('checkbox(test)', function(obj)
{
layer.alert('ID = '+obj.data.id+',checked = '+obj.checked+',type = '+obj.type);
});
??單元格編輯事件。數(shù)據(jù)表格模塊通過基礎(chǔ)參數(shù)editTrigger設(shè)置單元格編輯的事件觸發(fā)方式（還要搭配列參數(shù)中的edit屬性），如果單元格被編輯且值有變化則會(huì)觸發(fā)單元格編輯事件，通過“table.on(‘edit(test)’, function(obj))”代碼能夠響應(yīng)單元格編輯事件，并通過回調(diào)函數(shù)獲取相關(guān)信息，主要包括obj.value（修改后的值）、obj.field（單元格字段名）、obj.data（單元格所在行的所有相關(guān)數(shù)據(jù)），從瀏覽器的調(diào)試界面中可以看到，obj中還包括其它屬性，如原始值、tr/td節(jié)點(diǎn)信息等。獲取單元格編輯事件的示例代碼及截圖如下所示。
table.on('edit(test)', function(obj)
{
layer.alert('ID = '+obj.data.id+',field = '+obj.field+',newValue = '+obj.value);
});
??行單擊/雙擊事件。單擊或雙擊行時(shí)會(huì)觸發(fā)行單擊/雙擊事件，通過代碼“table.on(‘row(test)’, function(obj))”獲取行單擊事件，“table.on(‘rowDouble(test)’, function(obj))“獲取行雙擊事件，通過obj.data獲取當(dāng)前行信息。獲取單擊/雙擊事件的示例代碼及截圖如下所示（不要兩個(gè)事件同時(shí)處理，否則無法觸發(fā)雙擊事件處理函數(shù)）。
table.on('row(test)', function(obj)
{
layer.alert('singleclick,ID = '+obj.data.id);
});
table.on('rowDouble(test)', function(obj)
{
layer.alert('doubleclick,ID = '+obj.data.id);
});
文章來源：http://www.zghlxwxcb.cn/news/detail-684550.html
參考文獻(xiàn)：
[1]B站：layui框架精講全套視頻教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/文章來源地址http://www.zghlxwxcb.cn/news/detail-684550.html
到了這里，關(guān)于layui框架學(xué)習(xí)（40：數(shù)據(jù)表格_主要事件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
