zoukankan      html  css  js  c++  java
  • layui 数据表格按钮事件绑定和渲染

    先看效果图

    使用两种渲染方法:

    1.toolbar引入模板

    顶部的添加删除按钮,右侧的三个筛选,打印,导出按钮

    基础参数属性:toolbar:'#demo2',

    //创建 删除  添加按钮模板
    <!-- 生成模块 -->
    <script id="demo2" lay-filter="test1">
        <button type="button" class="layui-btn layui-btn-normal" lay-event="add">添加</button>
        <button type="button" class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
    </script>

    绑定:

    //监听事件
    table.on('toolbar(test)', function(obj){
        
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          layer.msg('添加');
        break;
        case 'delete':
            
          layer.msg('删除');
          
        break;
    //    case 'update':
    //      layer.msg('编辑');
    //    break;
      };
    });

    2.templet引入模板

    渲染修改按钮到数据表格

    使用属性:

    创建模板:

    <script id="demo1" lay-filter="test1">
        <button type="button" class="layui-btn layui-btn-warm" lay-event="update">修改</button>
    </script>

    使用表头属性:toolbar: '#demo1'

    绑定监听事件

    //监听工具条
    table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
      var tr = obj.tr; //获得当前行 tr 的DOM对象
     
      if(layEvent === 'add'){ //添加
          
        //do somehing
      } else if(layEvent === 'delete'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'update'){ //修改
        //do something
          console.log(data);
          layer.msg('修改');
        //同步更新缓存对应的值
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      }
    });
  • 相关阅读:
    c++ 视频和教程下载站点
    SQL超时解决方法
    初学者必备:C++经典入门详细教程
    人生致命的八个经典问题
    字长与字节
    typedef用法(三)
    遍历搜索注册表
    数据库连接字符串大全 之 SQL服务器篇
    十五个步骤收获学习的习惯
    谈基于.net平台windows开发中的模式窗体.NET教程,.NET Framework
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11237524.html
Copyright © 2011-2022 走看看