在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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 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 用sock技术发送邮件的函数
2007/07/21 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
理论讲解python多进程并发编程
2018/02/09 Python
用Python逐行分析文件方法
2019/01/28 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
HTML5标签小集
2011/08/02 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
个人租房协议书样本
2014/10/01 职场文书
介绍信格式
2015/01/30 职场文书
工程服务质量承诺书
2015/04/29 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技