在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中操作数据表格,给指定单元格添加事件示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。