在Layui中操作數據表格,給指定單元格添加事件示例

 更新時間:2019年10月26日 11:13:03   作者:CherryLee_1210   我要評論
今天小編就為大家分享一篇在Layui中操作數據表格,給指定單元格添加事件示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

最近入坑Layui這個為服務端程序員量身定做的前端框架。

為什么不用vue結合各種流行前端框架Element、iView啊什么,后臺大哥們不會啊!!!

只好我來遷就他們呢,還得一點一點兒的學起來。

當我們在操作數據表格的時候,并不是一定要點擊表格工具欄中的“查看”按鈕,來進行查看,而是點擊某一特定的列來進行某些數據查看。例如下圖這樣。

這就涉及到表格的自定義事件。代碼如下:

<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 個連續頁碼
    , 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: '當前任務編號', style: 'font-size: 12px; color: #666'},
    {field: 'taskLevel', title: '當前任務階段', 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'},
    // 這里設置event,事件名稱自定義。
    {field: 'history', title: '歷史任務', 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"){
 // 處理你的業務邏輯
 }
}

這樣就可以給某特定列設置自定義事件了。

以上這篇在Layui中操作數據表格,給指定單元格添加事件示例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論

福建体育彩票时时彩11