在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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
canvas实现钟表效果
Feb 13 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
浅谈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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
在Express中提供静态文件的实现方法
2019/10/17 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python中正则表达式的使用方法
2018/02/25 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python数据可视化图实现过程详解
2020/06/12 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
刑事附带民事代理词
2015/05/25 职场文书
团拜会主持词
2015/07/04 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技