在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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
Ajax和javascript的区别
2013/07/20 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
党支部审查意见
2015/06/02 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
导游词之山东八大关
2019/12/18 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL