在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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
python 实现波浪滤镜特效
2020/12/02 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
个人自我剖析材料
2014/02/07 职场文书
火车来了教学反思
2014/02/11 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
校园标语大全
2014/06/19 职场文书
普通党员对照检查材料
2014/09/24 职场文书
导游词之山海关
2019/12/10 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS