纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

在layui下对元素进行事件绑定的实例

Q-u-a-n   2020-05-17 我要评论

要注意的是记得要先引用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下对元素进行事件绑定的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


相关文章

猜您喜欢

  • Nuxt.js实现一个SSR的前端博客的示例代码

    这篇文章主要引见了Nuxt.js完成一个SSR的前端博客的示例代码,文中经过示例代码引见的十分细致,对大家的学习或者工作具有一定的参考学习价值,需求的朋友们下面随着小编来一同学习学习吧..
  • layui表格 列自动适应大小失效的解决方法

    今天小编就为大家分享一篇layui表格 列自动顺应大小失效的处理办法,具有很好的参考价值,希望对大家有所协助。一同跟随小编过来看看吧..

网友评论

Copyright 2020 www.zhuersoft.com 【助尔软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式