在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 相关文章推荐
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
java判断三位数的实例讲解
2019/06/10 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
手机被没收的检讨书
2014/10/04 职场文书
西游降魔篇观后感
2015/06/15 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
Java Spring读取和存储详细操作
2022/08/05 Java/Android