Layui数据表格动态加载操作按钮
效果:
方法一:绑定模版选择器
<div class="layui-card">
<div class="layui-card-body layui-row layui-col-space10">
<table class="layui-hide" id="deliveryTable" lay-filter="deliveryTable"></table>
<script type="text/html" id="delivery-table-operate">
<a class="layui-btn layui-btn-xs" lay-event="edit">备注</a>
{{# if(d.EnclosureUrl != ''){ }}
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="download">下载简历</a>
{{# } }}
</script>
</div>
</div>
table.render({
elem: '',
id: '',
height: '',
url: '', //数据接口,
method: 'post',
defaultToolbar: ['filter', 'exports', 'print'],
toolbar: false,
page: {
limit: 10,
limits: [10, 20, 30]
},
parseData: function (res) { //res 即为原始返回的数据 },
cols: [[
{ align: 'center', title: '操作', width: 180, toolbar: '#delivery-table-operate' }
]]
});
方法二:函数转义( layui 2.2.5及以上)
table.render({
elem: '',
id: '',
height: '',
url: '', //数据接口,
method: 'post',
defaultToolbar: ['filter', 'exports', 'print'],
toolbar: false,
page: {
limit: 10,
limits: [10, 20, 30]
},
parseData: function (res) { //res 即为原始返回的数据 },
cols: [[
{ align: 'center', title: '操作', width: 180, templet: OnloadTool }
]]
});
function OnloadTool(data) {
let htmls = '<a class="layui-btn layui-btn-xs" lay-event="edit">备注</a>';
if (data.EnclosureUrl != '') {
htmls += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="download">下载简历</a>';
}
return htmls;
}
官方文档:https://www.layui.com/doc/modules/table.html#templet
Layui数据表格动态加载操作按钮的更多相关文章
- layui数据表格分页加载动画,自己定义加载动画,"加载中..."
记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...
- 如何在在WinFrom的DataGridView中做到数据持续动态加载而不卡死
1.在这个过程我用过好几种办法 (1)使用委托的办法,这个方法可以做到持续加载,但是效果不理想会卡死 (2)开启线程的方法,会造成卡死 (3)使用另一个窗体的线程做持续加载(子窗体),让子窗体作为一个 ...
- Lodop 动态加载模板,动态加载数据
最近需要使用Lodop打印控件,所以就研究了一下,期间从网上找了诸多的东西,基本全是对HTML进行打印的,没有找到我想要的,就只好自己动手丰衣足食. 这篇文章主要讲述的是Lodop与数据的结合使用,官 ...
- 动态加载DataGrid表头及数据
初始化表头 js生成前端 /*初始化表头*/ function initDataGridTitle(id) { $.ajax({ url: '/${appName}/report/***/***', ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- 爬虫:获取动态加载数据(selenium)(某站)
如果网站数据是动态加载,需要不停往下拉进度条才能显示数据,用selenium模拟浏览器下拉进度条可以实现动态数据的抓取. 本文希望找到某乎某话题下讨论较多的问题,以此再寻找每一问题涉及的话题关键词(侵 ...
- 会员管理系统的设计和开发(2)-- RDLC报表的设计及动态加载
在上篇<会员管理系统的设计和开发(1)>介绍了关于会员系统的一些总体设计思路和要点,经过一段时间开发,软件终于完成并发布.在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续 ...
- Ajax动态加载数据
前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...
- MiniUI treeGrid 动态加载数据与静态加载数据的区别
说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...
随机推荐
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
- VMWare的三种网络连接方式
VMWare和主机的三种网络连接方式 桥接 这种模式下,虚拟机通过主机的网卡与主机通信,如果主机能够上网,则虚拟机也能联网. 在虚拟机中,需要将虚拟机的IP配置为与主机处于同一网段. 虚拟机也可以与同 ...
- 用了一年 TIM 移动版之后,我又换回了手机 QQ
TIM,是一个很玄学的产品. 讲真,我很不喜欢 QQ 电脑版.一个原因是我很讨厌一直占着右上角这一行为:右上角是给关闭按钮实现盲操用的,QQ 这么一个聊天软件没有这么高的地位:二是我不喜欢它的多窗口: ...
- springboot整合Mybatis(无xml)
1.pom文件 依赖引入 <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...
- Anaconda 安装 以及conda使用
下载 https://www.anaconda.com/distribution/#macos 管理 conda 版本查看 conda --version conda 版本更新 conda updat ...
- mysql explain的extra
导读 extra主要有是那种情况:Using index.Using filesort.Using temporary.Using where Using where无需多说,就是使用了where筛选 ...
- PIP设置镜像源
PIP设置镜像源 pip安装Python包时候,默认是国外的下载源,速度太慢,本文介绍几种设置pip国内镜像源的方法 镜像源 阿里云 http://mirrors.aliyun.com/pypi/si ...
- Python数据处理常用工具(pandas)
目录 数据清洗的常用工具--Pandas 数据清洗的常用工具 Pandas常用数据结构series和方法 Pandas常用数据结构dataframe和方法 常用方法 数据清洗的常用工具--Pandas ...
- Java中时间处理
旧 API:位于 java.util 包中,里面主要有 Date.Calendar.TimeZone 类 新 API:位于 java.time 包中,里面主要有 LocalDateTime.Zoned ...
- python django mkdir和makedirs的用法
总结一下mkdir和makedirs的用法: 1.mkdir( path [,mode] ) 作用:创建一个目录,可以是相对或者绝对路径,mode的默认模式是0777. ...