效果:

方法一:绑定模版选择器

<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数据表格动态加载操作按钮的更多相关文章

  1. layui数据表格分页加载动画,自己定义加载动画,"加载中..."

    记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...

  2. 如何在在WinFrom的DataGridView中做到数据持续动态加载而不卡死

    1.在这个过程我用过好几种办法 (1)使用委托的办法,这个方法可以做到持续加载,但是效果不理想会卡死 (2)开启线程的方法,会造成卡死 (3)使用另一个窗体的线程做持续加载(子窗体),让子窗体作为一个 ...

  3. Lodop 动态加载模板,动态加载数据

    最近需要使用Lodop打印控件,所以就研究了一下,期间从网上找了诸多的东西,基本全是对HTML进行打印的,没有找到我想要的,就只好自己动手丰衣足食. 这篇文章主要讲述的是Lodop与数据的结合使用,官 ...

  4. 动态加载DataGrid表头及数据

    初始化表头 js生成前端 /*初始化表头*/ function initDataGridTitle(id) { $.ajax({ url: '/${appName}/report/***/***', ...

  5. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  6. 爬虫:获取动态加载数据(selenium)(某站)

    如果网站数据是动态加载,需要不停往下拉进度条才能显示数据,用selenium模拟浏览器下拉进度条可以实现动态数据的抓取. 本文希望找到某乎某话题下讨论较多的问题,以此再寻找每一问题涉及的话题关键词(侵 ...

  7. 会员管理系统的设计和开发(2)-- RDLC报表的设计及动态加载

    在上篇<会员管理系统的设计和开发(1)>介绍了关于会员系统的一些总体设计思路和要点,经过一段时间开发,软件终于完成并发布.在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续 ...

  8. Ajax动态加载数据

    前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...

  9. MiniUI treeGrid 动态加载数据与静态加载数据的区别

    说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...

随机推荐

  1. bfs算法总结

    BFS(广度优先搜索) 类似于树的按层遍历 常用实现方法:队列 模板: 注意: 只能用来求解无权图的最短路径问题 队列:用来存储每一层便利得到的节点 标记:对于遍历过的结点,应将其标记,以防重复访问 ...

  2. https如何进行加密传输

    客户端是没有证书的,也就没有公钥和私钥. SSL握手阶段,服务器把证书传输给客户端,同时也就传输了公钥(公钥是证书的一部分). 由客户端来对这个证书进行有效性认可,再由这个客户端来生成对称密钥. 对称 ...

  3. Javascript:跳转到指定页面

    <div> <input type="text" id="jumpPage"/> <input type="button ...

  4. js数组的常见操作( push、pop、unshift、shift、splice、concat、 join)的用法

    1.数组添加删除 头部或尾部( push().pop().unshift().shift() ) 例2.数组尾部添加 push()方法可向数组的末尾添加一个或多个元素,并返回新的长度 语法:array ...

  5. org.apache.maven.plugins:maven-archetype-plugin:RELEASE:generate——解决方案汇总

    近期将自己本地的 maven 仓库进行了迁移,idea 的版本也升级到了IntelliJ IDEA 2019.3.3 x64,但是遇到了 Plugins 报红的情况,尝试很多方法,终于解决,现在做一下 ...

  6. 第一次前端实习机试题 很粗糙的一个天气预报demo

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  7. Controller是什么?

    控制器Controller 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现. 控制器负责解析用户的请求并将其转换为一个模型. 在Spring MVC中一个控制器类可以包含多个 ...

  8. 基于Python3.7的robotframework环境搭建步骤

    一.前言 Robot Framework作为公司能快速落地实现UI自动化测试的一款框架,同时也非常适合刚入门自动化测试的朋友们去快速学习自动化,笔者计划通过从搭建逐步到完成自动化测试的过程来整体描述它 ...

  9. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  10. 发布Nuget包时遇到都意外

    准备好工具和发布教程.(这些网上都有,我就不说了,就说说我遇到都意外.) 在发布包都过程中,我给我都dll命名为Common.不知道是不是这个原因导致的我包发布上去后,程序对其引用时居然没主动引用进程 ...