在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 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
初识php MVC
2014/09/10 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
vue跨域解决方法
2017/10/15 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python实现解数独程序代码
2017/04/12 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python对象与引用的介绍
2019/01/24 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
会计专业毕业自荐书范文
2014/02/08 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
学校德育工作总结2015
2015/05/11 职场文书
队列队形口号
2015/12/25 职场文书
《詹天佑》教学反思
2016/02/20 职场文书