layui 数据表格按钮事件绑定和渲染

时间:2022-12-17 09:51:57

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'
});
}
});

layui 数据表格按钮事件绑定和渲染的更多相关文章

  1. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

  2. LayUI——数据表格使用

    Layui数据表格的实际项目使用 Layui的数据表格可谓是在后台管理的页面中经常用到的工具了 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮 ...

  3. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  4. layui 数据表格自带的导出Excel&comma;身份证等E&plus;&sol;000问题解决

    layui数据表格的工具栏自带导出Excel 会将身份证等 长整数的 自动变成E+并且 后面有000.从而导致数据不能完整导出. 解决方案: 1.先下载Excel的插件包.将压缩包内的两个js放到 l ...

  5. 解决:layUI数据表格&plus;简单查询

    解决:layUI数据表格+简单查询 最近在用layui写项目,在做到用户查询时,发现在layui框架里只有数据表格,不能增加查询.于是自己摸索了一下,写个笔记记录一下. 我想要的效果: 1.定义查询栏 ...

  6. Layui数据表格模型

    视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...

  7. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  8. Layui数据表格加入自定义扩展方法&lpar;重新渲染Render当前页数据&rpar;

    具体开发中遇到的问题如下, 数据表格的重新渲染或重新加载会导致当前操作的分页 或 配置被清空.我正在操作第5页,重新渲染后就回到了最原始第1页. 需要达到的效果是: 不调用接口,仅仅只是从table. ...

  9. 关于layui数据表格的各种事件

    table.on('tool(demo)', function(obj){}):监听工具条事件,tool 是工具条事件名,demo 是 table 原始容器的属性 lay-filter="对 ...

随机推荐

  1. 火狐下多个span连在一起和换行写存在差异

    当父元素的宽度确定,多个span换行写,span加起来占的宽度比预设的大

  2. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  3. 【转】HBase 超详细介绍

    ---恢复内容开始--- http://blog.csdn.net/frankiewang008/article/details/41965543 1-HBase的安装 HBase是什么? HBase ...

  4. 纯C&plus;&plus;文件调用MFC类

    在VS2008中 将预编译头属性 由 不使用预编译头 改成 使用使用预编译头 在响应的.cpp文件的最前面 #include "stdafx.h"

  5. webApi文档好帮手-apidoc使用教程

    来源:http://blog.csdn.net/xumin198908/article/details/41964159 在开发后台接口的过程中,我们肯定要提供一份api接口文档给终端app. 目前大 ...

  6. linux常用命令(自我积累)

    创建目录:mkdir + 目录名 使文件可执行:chmod +x filename 执行文件:./filename 来执行您的脚本 {程序必须以下面的行开始(必须方在文件的第一行): #!/bin/s ...

  7. (0)写给Web初学者的教案-----Web基础

    0,Web基础 一.    What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...

  8. Node笔记四

    异步操作 -Node采用chrome v8 引擎处理javascript脚本 --v8最大特点就是单线程运行,一次只能运行一个任务 -Node大量采用异步操作 --任务不是马上执行,而是插在任务队列的 ...

  9. Tomcat-servlet基础

    1.1 概念 运行在服务器上的小程序   定义了浏览器访问到(tomact)的规则 1.2 步骤 1.3 执行原理 1  当服务器 接收到客户端浏览器的请求后  会解析url地址  获得url路径   ...

  10. ios UrlEncode与UrlDecode

    url字符串中具有特殊功能的特殊字符的字符串,或者中文字符,作为参数用GET方式传递时,需要用urlencode处理一下.当然,有时作为Post参数传递,也需要urlencode处理一下. NSStr ...