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 相关文章推荐
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 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实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
JavaScript修改css样式style
2008/04/15 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
13个PHP函数超实用
2015/10/21 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python爬取微信公众号文章的方法
2019/02/26 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python实现人机五子棋
2020/03/25 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
大学生个人求职信范文
2013/09/21 职场文书
大学生求职中的自我评价
2013/10/01 职场文书
自我鉴定范文200字
2013/10/02 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
升国旗演讲稿
2014/09/05 职场文书
2014年库房工作总结
2014/11/26 职场文书
国家助学金感谢信
2015/01/21 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server