在Layui中操作数据表格,给指定单元格添加事件示例


Posted in Javascript onOctober 26, 2019

最近入坑Layui这个为服务端程序员量身定做的前端框架。

为什么不用vue结合各种流行前端框架Element、iView啊什么,后台大哥们不会啊!!!

只好我来迁就他们呢,还得一点一点儿的学起来。

当我们在操作数据表格的时候,并不是一定要点击表格工具栏中的“查看”按钮,来进行查看,而是点击某一特定的列来进行某些数据查看。例如下图这样。

在Layui中操作数据表格,给指定单元格添加事件示例

这就涉及到表格的自定义事件。代码如下:

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

Javascript 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
JS中操作JSON总结
Dec 06 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 #Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 #Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 #Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 #Javascript
Layui数据表格之单元格编辑方式
Oct 26 #Javascript
layui表格设计以及数据初始化详解
Oct 26 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
php时区转换转换函数
2014/01/07 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP7匿名类用法分析
2016/09/26 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
移动节点的jquery代码
2014/01/13 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python实现小世界网络生成
2019/11/21 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
幼儿园门卫岗位职责
2014/02/14 职场文书
求职自荐信怎么写
2014/03/06 职场文书
技术总监管理职责范本
2014/03/06 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL