layui自定义工具栏

给大家分享的功能是layui自定义工具栏
功能效果：开启数据表格头部工具栏区域
关键参数：toolbar
参数类型：String/DOM/Boolean
参数说明：
toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器
toolbar: ‘<div>xxx</div>’ //直接传入工具栏模板字符
toolbar: true //仅开启工具栏，不显示左侧模板
toolbar: ‘default’ //让工具栏左侧显示默认的内置模板
在这里我用的是第一种toolbar:’#toolbarDemo’，就是调用自己定义的工具栏的模板选择器

功能效果图：

已封装好的自定义工具栏模板选择器：

<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="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自定义工具栏相关推荐

ie8浏览器自定义工具栏设置教程
ie8浏览器自定义工具栏设置教程 ie8浏览器自定义工具栏怎么设置?在使用IE8的网友知道,在安装IE8之后会发现IE8的工具栏中的按钮非常少,明显的不便于我们平时的上网操作.所以我们有必要根据自己的 ...
java menu单击事件_TinyMCE自定义工具栏menuItem单击触发所有父项的单击事件
我正在为我的tinyMCE添加一个自定义工具栏按钮 tinyMCE.init({ mode: "specific_textareas", editor_selector: &quo ...
基于Layui自定义内容轮播插件
基于Layui自定义内容轮播插件演示地址下载地址
layui自定义模块、日志打印使用、layui文件上传云服务器
1.layui自定义模块:方便接口调用异步请求url地址不方便解决:扩展模块 1):定义对应js文件 ja>lay-module创建http目录创建http.js文件 2): ...
excel 自定义工具栏_您的自定义Excel工具栏
excel 自定义工具栏 Yesterday I posted a tip for adding the Refresh All button to the PivotTable toolbar, s ...
kindEditor编辑器如何自定义工具栏
1.http://kindeditor.net/down.php 下载插件 2.引入css和js <link rel="stylesheet" href="/res ...
layui自定义模块实现下拉框，读取数据字典数据
项目中页面很多下拉框,都是调用数据字典表数据,例如性别:男,女,:删除状态:已删除,正常. 如果每个地方都用ajax调用,过于麻烦,代码越多,维护工作就越麻烦.故使用layui自定义模块实现统一操作. ...
Cognex ToolBlockEdit自定义工具栏
CogToolBlockEditV2自定义工具栏 CogToolBlockEditV2工具栏自带的功能已经无法满足现场使用的需求了,有一股很想修改或自定义工具栏功能的冲动,带着这个冲动劲,可以实现对工 ...
vue set设置html根字体,vue-quill-editor安装及使用：自定义工具栏和自定义中文字体，把字体写在html的style中...
一.自定义工具栏把toolbar在vue的data return里配置就可以: 二.用vue-quill-editor写出来的邮件,发出去之后字体样式变了,那是应该vue-quill-editor改变 ...

layui自定义工具栏

layui自定义工具栏

layui自定义工具栏相关推荐

最新文章

热门文章