在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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
javascript的BOM
2016/05/03 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
js模拟微博发布消息
2017/02/23 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
微信小程序实现音乐播放器
2019/11/20 Javascript
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python学生管理系统
2019/01/30 Python
python内存动态分配过程详解
2019/07/15 Python
Python中turtle库的使用实例
2019/09/09 Python
PyTorch预训练的实现
2019/09/18 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
社团活动总结报告
2014/06/27 职场文书
2014年维稳工作总结
2014/11/18 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
关于长城的导游词
2015/01/30 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python