在layui下对元素进行事件绑定的实例


Posted in Javascript onSeptember 06, 2019

要注意的是记得要先引用element操作模块 ,否则是无法绑定的

格式:

$(document).on(事件,标识,function(){});

layui.use(['jquery', 'form', 'table', 'element'], function() {
  var form = layui.form;
  var table = layui.table;
  var element = layui.element;
  var $ = layui.$;
 
 
  // form.render();
  table.render({
   elem: '#tableList',
   // height: 315,
   url: "{{route('admin.data')}}",
   page: true, //开启分页 
   cols: [
    [ //表头
     { field: 'id', title: 'ID', sort: true, fixed: 'left' },
     { field: 'name', title: '用户名' },
     { field: 'role', title: '角色', sort: true },
     {
      field: 'status',
      title: '状态',
      templet: function(d) {
       return d.status == 0 ? '禁止' : '启用'
      }
     },
     { field: 'created_at', title: '创建时间' },
     {
      title: '操作',
      // minWidth: 200,
      templet: function(d) {
       return '<button class="layui-btn layui-btn-xs " lay-filter="editF" id="edit" data-id="' + d.id + '">编辑</button>'
      }
     }
    ]
   ]
  });
  //绑定事件
  $(document).on('click', '#edit', function(data) {
   var id = $(this).attr('data-id');
 
  });
  });

以上这篇在layui下对元素进行事件绑定的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 #Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 #Javascript
使用layui的router来进行传参的实现方法
Sep 06 #Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 #Javascript
layui关闭层级、简单监听的实例
Sep 06 #Javascript
layui表格内容溢出的解决方法
Sep 06 #Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 #Javascript
You might like
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php生成略缩图代码
2012/07/16 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery 选择器理解
2010/03/16 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
使用javascript插入样式
2016/03/14 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
医德医风演讲稿
2014/05/20 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
六年级小学生评语
2014/12/26 职场文书
琅琊山导游词
2015/02/05 职场文书
社区母亲节活动总结
2015/02/10 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
Redis 异步机制
2022/05/15 Redis