在Layui中操作數(shù)據(jù)表格,給指定單元格添加事件示例
最近入坑Layui這個為服務(wù)端程序員量身定做的前端框架。
為什么不用vue結(jié)合各種流行前端框架Element、iView啊什么,后臺大哥們不會?。。?!
只好我來遷就他們呢,還得一點一點兒的學起來。
當我們在操作數(shù)據(jù)表格的時候,并不是一定要點擊表格工具欄中的“查看”按鈕,來進行查看,而是點擊某一特定的列來進行某些數(shù)據(jù)查看。例如下圖這樣。
這就涉及到表格的自定義事件。代碼如下:
<table id='task-list' lay-filter='task-list'></table> // 需要渲染的表格 var tableInit = function (data) { table.render({ elem: '#task-list' , height: 472 , title: '決策場景信息' , limit: data.length + 1 , page: { theme: '#1E9FFF', layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] //自定義分頁布局 , limit: 10 , groups: 1 //只顯示 1 個連續(xù)頁碼 , first: false //不顯示首頁 , last: false //不顯示尾頁 } , cols: [[ {field: 'id', title: '序號', width: 60, style: 'font-size: 12px; color: #666'}, {field: 'modelNum', title: '場景模型編號', style: 'font-size: 12px; color: #666'}, {field: 'modelName', title: '場景模型名稱', style: 'font-size: 12px; color: #666'}, {field: 'taskNum', title: '當前任務(wù)編號', style: 'font-size: 12px; color: #666'}, {field: 'taskLevel', title: '當前任務(wù)階段', width: 150, templet: "#level", style: 'font-size: 12px; color: #666'}, {field: 'report', title: '報告', width: 60, event: 'viewReport', templet: "#reportID", style: 'font-size: 12px; color: #666; cursor:pointer'}, // 這里設(shè)置event,事件名稱自定義。 {field: 'history', title: '歷史任務(wù)', width: 100, style: 'font-size: 12px; color: #666'}, { fixed: 'right', title: '操作', width: 100, toolbar: "#table-linetoolbar", align: 'center', style: 'font-size: 12px; color: #666' } ]] , cellMaxWidth: 100 , parseData: function (res) { return res; } , data: data , id: 'task-list' }); table.on('tool(task-list)', function (obj) { let event = obj.event; if (event === "viewReport"){ // 處理你的業(yè)務(wù)邏輯 } }
這樣就可以給某特定列設(shè)置自定義事件了。
以上這篇在Layui中操作數(shù)據(jù)表格,給指定單元格添加事件示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能,結(jié)合實例形式詳細分析了javascript事件響應(yīng)及頁面元素屬性動態(tài)操作實現(xiàn)滑塊拖動功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08JavaScript基礎(chǔ)知識及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分,所以想學好AJAX以及現(xiàn)在流行的AJAX框架,學好JAVASCRIPT是最重要的,通過本篇文章給大家介紹javascript基礎(chǔ)知識及常用方法總結(jié),對js基礎(chǔ)知識及常用方法相關(guān)知識感興趣的朋友一起學習吧2016-01-01