Layui表格头部工具栏

开发工具与关键技术：VS2015，Javascript撰写时间：2019年6月16日

layui插件具有丰富而强大的功能，其中layui 的table组件也包含了许多用法，这些用法都很强大，而下面就来看一下它的表格工具栏部分。

首先，要用到工具栏必须要先开启工具栏，官方给出的开启方法是在表格渲染时加入 toolbar:true 即可开启，这可还是很简单的。

效果图：

第一个图标是显示，隐藏表格的列。
第二个图标是导出表格当前页的所有数据。
第三个图标是打印表格当前页的所有数据。

有时候开发的过程中并不需要三个图标一起出现，可能是只想要一个图标或者两个图标，那就需要把不需要的图标给隐藏起来。
这个功能官方也给做得很人性化，不需要再额外写代码，想要实现这个功能只需要直接给表格加上 defaultToolbar: [‘filter’, ‘print’, ‘exports’]

中括号里的单词代表的图标分别是显示隐藏列，打印，导出。
实际应用中想要哪些功能就写哪个单词就可以了。

例如只需要显示隐藏列

效果图：

参考layui官方文档

Layui表格头部工具栏相关推荐

layui.table 头部工具栏与行工具栏的实例
书接上文,话说这 layui 建好数据表格之后,后面往往还要加上几个按钮,上面可能还有个批量删除什么的,今天主要来说说这些功能是怎么实现的. 首先是html页面,还是就一个空 table ,代码如下: ...
layui table 头部工具栏右侧图标隐藏，增加
defaultToolbar - 头部工具栏右侧图标类型:Array,默认值:["filter","exports","print"] 该 ...
layui开启表格头部工具栏不显示的问题
在用layui的时候,发现它这个表头工具栏还是很不错,但是在使用过程中,根据官方文档来看,只需要引入以及选择挂载自定义工具栏但是我自己已经检查了很多遍,结果顶部工具栏一直不显示,也不知道为什么,结 ...
layUI表格工具栏事件点击后刷新页面解决办法
layUI表格工具栏事件点击后刷新页面的解决办法将默认的按钮<button class="layui-btn" lay-event="事件名">按 ...
layui表格——table.render(options)（转）
一.使用方法 1.在页面代码里写一个table标签和id属性 <table id="demo" lay-filter="test"></tab ...
layui表格使用及分页实现
前言最近一直见群友问table怎么用的,怎么渲染不了我的数据,开了分页怎么没有用-故写本博客望给群友以及刚用layui的开发者解疑答惑,博主是用java写后端的,其他语言的话可做参考本博客表格先 ...
layui表格筛选列不随页面刷新重置
Layui table 自带筛选列的功能,但是这个筛选列会随着页面的刷新重置.用户第二次进入页面或者进行table手工渲染,都会使得筛选项重置. 本例利用layui自带的本地储存进行筛选列的数据保存, ...
layui表格单元格添加下拉选择功能
layui表格单元格添加下拉选择功能 1.修改表头 2.更新数据 3.修改样式代码如下: <style>/*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格 ...
Layui表格全部数据！导出！
目录 1.前言 2.单页导出 3.全部页导出 4.代码实例 5.页面展示一.前言开发工具:Visual Studio2017 前端框架:layui 使用了layui自带的导出功能后,真的是超级便捷 ...

Layui表格头部工具栏

Layui表格头部工具栏相关推荐

最新文章

热门文章