layui自定义工具栏的方法


Posted in Javascript onSeptember 19, 2019

给大家分享的功能是layui自定义工具栏

功能效果:开启数据表格头部工具栏区域

关键参数:toolbar

参数类型:String/DOM/Boolean

参数说明:

toolbar: ‘#toolbarDemo' //指向自定义工具栏模板选择器

toolbar: ‘<div>xxx</div>' //直接传入工具栏模板字符

toolbar: true //仅开启工具栏,不显示左侧模板

toolbar: ‘default' //让工具栏左侧显示默认的内置模板

在这里我用的是第一种toolbar:'#toolbarDemo',就是调用自己定义的工具栏的模板选择器

功能效果图:

layui自定义工具栏的方法

已封装好的自定义工具栏模板选择器:

<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
 <button class="layui-btn layui-btn-sm" lay-event="getSelect">查询</button>
 <button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button>
 <button class="layui-btn layui-btn-sm" lay-event="getUpdate">修改</button>
 <button class="layui-btn layui-btn-sm" lay-event="getDelete">删除</button>
 <button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button>
 </div>
</script>

调用方法:

首先得引用jquery和layui的css样式、js样式

<link href="~/Contents/assets/layui/css/layui.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Contents/js/jquery-3.3.1.min.js"></script>
<script src="~/Contents/assets/layui/layui.all.js"></script>


layui.use('table', function () {
 var table = layui.table;
 table.render({
 elem: '#table',
 url: 'SelectDepartment', //数据接口
 page: true, //开启分页
 cols: [[ //表头
  { type: 'numbers', title: '序号', align: 'center', width: 100 },
  { field: 'DepartmentNumber', title: '部门编号', align: 'center' },
  { field: 'Department', title: '部门名称', align: 'center' }
 ]],
 id: 'table',
 toolbar: '#toolbarDemo',//开启自定义工具行,指向自定义工具栏模板选择器
 defaultToolbar: ['filter', 'print', 'exports']
 });
});

上面的toolbar: '#toolbarDemo'这句代码是这个功能的关键代码

以上这篇layui自定义工具栏的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
jQuery的三种$()
Dec 30 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
Node 代理访问的实现
Sep 19 #Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 #Javascript
微信小程序进入广告实现代码实例
Sep 19 #Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 #Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 #Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 #Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 #Javascript
You might like
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Vue指令指令大全
2019/02/09 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
python中self原理实例分析
2015/04/30 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python在每个字符后添加空格的实例
2018/05/07 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
Pytorch可视化的几种实现方法
2021/06/10 Python
python标准库ElementTree处理xml
2022/05/20 Python