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 数据表格按钮事件绑定和渲染的更多相关文章
- 使用webapi绑定layui数据表格完整增删查改记录
因为每次给layui数据表格绑定数据或者类似操作的时候 总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...
- LayUI——数据表格使用
Layui数据表格的实际项目使用 Layui的数据表格可谓是在后台管理的页面中经常用到的工具了 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮 ...
- layui数据表格搜索
简单介绍 我是通过Servlet传递json给layui数据表格模块,实现遍历操作的,不过数据量大的话还是需要搜索功能的.这是我参考网上大佬代码写出的搜索功能. 实现原理 要实现搜索功能,肯定需要链接 ...
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题
关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...
- layui 数据表格自带的导出Excel,身份证等E+/000问题解决
layui数据表格的工具栏自带导出Excel 会将身份证等 长整数的 自动变成E+并且 后面有000.从而导致数据不能完整导出. 解决方案: 1.先下载Excel的插件包.将压缩包内的两个js放到 l ...
- 解决:layUI数据表格+简单查询
解决:layUI数据表格+简单查询 最近在用layui写项目,在做到用户查询时,发现在layui框架里只有数据表格,不能增加查询.于是自己摸索了一下,写个笔记记录一下. 我想要的效果: 1.定义查询栏 ...
- Layui数据表格模型
视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...
- Layui数据表格的接口数据请求方式为Get
Layui数据表格的接口数据请求方式为Get
- Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据)
具体开发中遇到的问题如下, 数据表格的重新渲染或重新加载会导致当前操作的分页 或 配置被清空.我正在操作第5页,重新渲染后就回到了最原始第1页. 需要达到的效果是: 不调用接口,仅仅只是从table. ...
随机推荐
- 13、canvas操纵像素数据ImageData
2019独角兽企业重金招聘Python工程师标准>>> 一.ImageData 对象 含义: 存储canvas对象真实的像素数据(每个像素块的RGBA色值) 属性: 1.width: ...
- 发布AI芯片昆仑和百度大脑3.0、L4自动驾驶巴士量产下线,这是百度All in AI一年后的最新答卷...
机器之心报道,作者:李泽南. 去年的 7 月 5 日,百度在北京国际会议中心开办了首届「AI 开发者大会」.在会上,百度首次喊出了「All in AI」的口号.一年的时间过去了,今天在同样地点举行的第 ...
- JVM调优:GC 参数
2019独角兽企业重金招聘Python工程师标准>>> JVM调优:GC 参数 博客分类: java jvm 参考: <Memory Management in the Jav ...
- 《C程序设计语言》 练习1-23
问题描述 编写一个删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不允许嵌套. Write a program to remove all comments fro ...
- 使用JDBC连接oracle数据库
需要jar包:ojdbc6.jar
- QtCreator中使用链接库
说明 之前讨论的DLL的静态链接和动态连接都是基于 MSVC 编译器,但是 MinGW 似乎有另外一套类似但是不相同的机制.下文均在 windows 下使用 Qt Creator 中使用 MinGW ...
- 手把手教你学Numpy,从此处理数据不再慌「一」
当当当,我又开新坑了,这次的专题是Python机器学习中一个非常重要的工具包,也就是大名鼎鼎的numpy. 所以今天的文章是Numpy专题的第一篇. 俗话说得好,机器学习要想玩的溜,你可以不会写Pyt ...
- 关于tez-ui的"All DAGs"和"Hive Queries"页面信息为空的问题解决过程
近段时间发现公司的HDP大数据平台的tez-ui页面不能用了,页面显示为空,导致通过hive提交的sql不能方便地查找到Yarn上对应的applicationId,只能通过beeline的屏幕输出信息 ...
- Python 的十万个为什么?
随着 Python 在近些年的火爆,网上出现了很多这个方向的公众号和博客,文章也层出不穷. 受到此风气的影响,我也把自己"培养"成了一名技术博主,写作近两年来,陆陆续续写过不少的系 ...
- wpf winform 截图
wpf 通过下面的截图,标题可能会丢失. public void CreateBitmapFromVisual(Window win, string fileName) { ...