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 Function对象扩展之延时执行函数
Jul 06 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
angularjs下拉框空白的解决办法
Jun 20 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript jQuery插件练习
2008/12/24 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python 文件管理实例详解
2015/11/10 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python队列Queue的详解
2019/05/10 Python
python实现简单颜色识别程序
2020/02/19 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python如何定义接口和抽象类
2020/07/28 Python
运行Python编写的程序方法实例
2020/10/21 Python
python 实现的车牌识别项目
2021/01/25 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
新生入学欢迎词
2015/01/26 职场文书
新兵入伍决心书
2015/09/22 职场文书
2016年寒假家长评语
2015/10/10 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL