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 网站换肤功能实现代码
Nov 02 Javascript
js操作二级联动实现代码
Jul 27 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
DIV始终居中的js代码
Feb 17 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
js实现三角形粒子运动
Sep 22 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里8个鲜为人知的安全函数分析
2014/12/09 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python反射的用法实例分析
2018/02/11 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python如何省略括号方法详解
2020/03/21 Python
教师评优的个人自我评价分享
2013/09/19 职场文书
护士在校生自荐信
2014/02/01 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
体现团队精神的口号
2014/06/06 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers