在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鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
JavaScript实现音乐导航效果
Nov 19 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中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
如何在python中执行另一个py文件
2020/04/30 Python
python中pdb模块实例用法
2021/01/15 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
请说出几个常用的异常类
2013/01/08 面试题
超市中秋节促销方案
2014/03/21 职场文书
学生会竞聘书范文
2014/03/31 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电