在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文件的函数代码分享
Jul 28 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
微信小程序日历效果
Dec 29 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
牡丹941资料
2021/03/01 无线电
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Bootstrap table使用方法汇总
2017/11/17 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python实现邮件发送功能
2019/08/10 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python魔术方法专题
2020/06/19 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
如何利用find命令查找文件
2016/11/18 面试题
运动会通讯稿500字
2014/02/20 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
责任书格式
2019/04/18 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android