在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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
angular中的post请求处理示例详解
Jun 30 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 adodb介绍
2009/03/19 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
php实现留言板功能
2017/03/05 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
JavaScript this 深入理解
2009/07/30 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
校园歌手大赛策划书
2014/01/17 职场文书
十八大感想感言
2014/02/10 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
基于angular实现树形二级表格
2021/10/16 Javascript
详解OpenCV曝光融合
2022/04/29 Python