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=\"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自定义工具栏的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。