在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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
浅析创建javascript对象的方法
May 13 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 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
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript hasFocus使用实例
2010/06/29 Javascript
validator验证控件使用代码
2010/11/23 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python 模板引擎的注入问题分析
2017/01/01 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python requests指定出口ip的例子
2019/07/25 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
大学生自荐信
2013/12/11 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
协议书格式
2014/04/23 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
个人总结与自我评价
2015/02/14 职场文书
门球健将观后感
2015/06/16 职场文书
运动会通讯稿600字
2015/07/20 职场文书