在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 实现点击a标签的时候让其背景更换
Oct 15 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
咖啡与水的关系
2021/03/03 冲泡冲煮
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP序列化操作方法分析
2016/09/28 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python 标准差计算的实现(std)
2019/07/29 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Python实现手势识别
2020/10/21 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
《恐龙》教学反思
2014/04/27 职场文书
公司感谢信范文
2015/01/22 职场文书
python状态机transitions库详解
2021/06/02 Python