在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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
bootstrap表单示例代码分享
May 18 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 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
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
快速入门Vue
2016/12/19 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python中functools模块函数解析
2017/03/12 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
求职信怎么写
2014/05/23 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
公司证明怎么写
2014/09/22 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
幼儿园个人总结
2015/02/28 职场文书
义卖募捐活动总结
2015/05/09 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL