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 事件参考手册
Dec 24 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
javascript实现密码验证
Nov 10 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 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查询域名状态whois的类
2006/11/25 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
详解python配置虚拟环境
2019/04/08 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
中科前程Java笔试题
2016/11/20 面试题
2014年体育部工作总结
2014/11/13 职场文书
总经理检讨书范文
2015/02/16 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL