在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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
js实现随机点名功能
2020/12/23 Javascript
用python代码做configure文件
2014/07/20 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
django在开发中取消外键约束的实现
2020/05/20 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
学期自我鉴定范文
2013/10/01 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
护士求职自荐信范文
2014/03/19 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
canvas绘制折线路径动画实现
2021/05/12 Javascript
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis