在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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP输入流php://input介绍
2012/09/18 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
JS中Map和ForEach的区别
2018/02/05 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python gdal安装与简单使用
2019/08/01 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
几个常见的软件测试问题
2016/09/07 面试题
学习十八大的心得体会
2014/09/12 职场文书
股指期货心得体会
2014/09/13 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
正规欠条模板
2015/07/03 职场文书