在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 IE和FF兼容性问题汇总
Feb 09 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
Element Badge标记的使用方法
Jul 27 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的远程图片抓取函数分享
2013/09/25 PHP
PHP文件上传类实例详解
2016/04/08 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
党员转正介绍人意见
2015/06/03 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android