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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
Node.js实现数据推送
Apr 14 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 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 常见郁闷问题答解
2006/11/25 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
JS实现简易计算器
2020/02/14 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
django框架如何集成celery进行开发
2017/05/24 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python 实现汉诺塔游戏
2020/11/28 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
大学自我评价
2014/02/12 职场文书
自我鉴定总结
2014/03/24 职场文书
毕业生政审意见范文
2015/06/04 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL