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中getJSON的使用方法
Dec 13 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JS数组的常见用法实例
Feb 10 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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
基于文本的访客签到簿
2006/10/09 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
提升Python程序性能的7个习惯
2019/04/14 Python
用python绘制樱花树
2020/10/09 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
校园活动宣传方案
2014/03/28 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
表扬稿范文
2015/01/17 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
浅谈Python数学建模之数据导入
2021/06/23 Python