在Layui中操作數(shù)據(jù)表格,給指定單元格添加事件示例
最近入坑Layui這個(gè)為服務(wù)端程序員量身定做的前端框架。
為什么不用vue結(jié)合各種流行前端框架Element、iView啊什么,后臺(tái)大哥們不會(huì)?。。?!
只好我來遷就他們呢,還得一點(diǎn)一點(diǎn)兒的學(xué)起來。
當(dāng)我們在操作數(shù)據(jù)表格的時(shí)候,并不是一定要點(diǎn)擊表格工具欄中的“查看”按鈕,來進(jìn)行查看,而是點(diǎn)擊某一特定的列來進(jìn)行某些數(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 個(gè)連續(xù)頁碼 , first: false //不顯示首頁 , last: false //不顯示尾頁 } , cols: [[ {field: 'id', title: '序號(hào)', width: 60, style: 'font-size: 12px; color: #666'}, {field: 'modelNum', title: '場景模型編號(hào)', style: 'font-size: 12px; color: #666'}, {field: 'modelName', title: '場景模型名稱', style: 'font-size: 12px; color: #666'}, {field: 'taskNum', title: '當(dāng)前任務(wù)編號(hào)', style: 'font-size: 12px; color: #666'}, {field: 'taskLevel', title: '當(dāng)前任務(wù)階段', width: 150, templet: "#level", style: 'font-size: 12px; color: #666'}, {field: 'report', title: '報(bào)告', 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)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解
- Layui數(shù)據(jù)表格之單元格編輯方式
- Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實(shí)現(xiàn)
- layui table表格數(shù)據(jù)的新增,修改,刪除,查詢,雙擊獲取行數(shù)據(jù)方式
- 解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題
- Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁)
- layui+ssm實(shí)現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)功能
相關(guān)文章
原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)滑塊拖動(dòng)功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08用js讀、寫、刪除Cookie代碼分享及詳細(xì)注釋說明
JavaScript是運(yùn)行在客戶端的腳本,因此一般是不能夠設(shè)置Session的,因?yàn)镾ession是運(yùn)行在服務(wù)器端的。而cookie是運(yùn)行在客戶端的,所以可以用JS來設(shè)置cookie. 下面我們來分析下案例2014-06-06JavaScript基礎(chǔ)知識(shí)及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分,所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架,學(xué)好JAVASCRIPT是最重要的,通過本篇文章給大家介紹javascript基礎(chǔ)知識(shí)及常用方法總結(jié),對(duì)js基礎(chǔ)知識(shí)及常用方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01