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代码
Feb 19 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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 zip文件解压类代码
2009/12/02 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php扩展开发入门demo示例
2019/09/23 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
javascript天然的迭代器
2010/10/29 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python中除法使用的注意事项
2014/08/21 Python
python人人网登录应用实例
2014/09/26 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python3内置模块random随机方法小结
2019/07/13 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
2014年国庆标语
2014/06/30 职场文书
2014年大学生工作总结
2014/11/20 职场文书
预备党员入党感言
2015/08/01 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers