在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 相关文章推荐
jQuery控制cookie过期时间的方法
Apr 07 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
JS中数据结构之栈
Jan 01 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
详解Node.js如何处理ES6模块
May 15 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php HandlerSocket的使用
2011/05/02 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP积分兑换接口实例
2015/02/09 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
JS实现放烟花效果
2020/03/10 Javascript
python 字典中取值的两种方法小结
2018/08/02 Python
django-filter和普通查询的例子
2019/08/12 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
在python中求分布函数相关的包实例
2020/04/15 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
庆七一活动方案
2014/01/25 职场文书
化工专业求职信
2014/07/01 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
院系推荐意见
2015/06/05 职场文书
求职自我评价参考范文
2019/05/16 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android