在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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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+redis实现的悲观锁机制示例
2018/06/12 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
js返回顶部实例分享
2016/12/21 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue写一个组件
2018/04/09 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python3.x实现发送邮件功能
2018/05/22 Python
python中class的定义及使用教程
2019/09/18 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
校园新闻广播稿
2014/01/10 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript