宝哥软件园

layui自定义工具栏的方法

编辑:宝哥软件园 来源:互联网 时间:2021-08-20

给大家分享的功能是获得自定义工具栏

功能效果:开启数据表格头部工具栏区域

关键参数:工具栏

参数类型:字符串/DOM/布尔值

参数说明:

toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器

toolbar: 'divxxx/div' //直接传入工具栏模板字符

toolbar: true //仅开启工具栏,不显示左侧模板

工具栏: '默认'//让工具栏左侧显示默认的内置模板

在这里我用的是第一种toolbar:'#toolbarDemo ',就是调用自己定义的工具栏的模板选择器

功能效果图:

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

脚本类型=' text/html ' id=' toolbarDemo ' div class=' layui-BTN-容器' 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 '刷新/按钮/div/脚本调用方法:

首先得引用框架和获得的钢性铸铁样式、js样式

link href=' ~/Contents/assets/layui/CSS/layui。CSS“rel=”外部no跟随“rel=”样式表'/脚本src=' http : ~/Contents/js/jquery-3。3 .1 .量滴js /脚本src=' http : ~/Contents/assets/layui。全部。js '/脚本layui。使用(' table ',function(){ var table=layui。桌子;table.render({ elem: '#table ',url: 'SelectDepartment ',//数据接口第:页为真,//开启分页cols: [[ //表头{ type: 'numbers ',title: '序号,对齐: '中心,宽度: 100 },{字段: '部门编号,标题: '部门编号,对齐: '中心' },{字段: '部门,标题: '部门名称,align: 'center' } ],id: 'table ',toolbar: '#toolbarDemo ',//开启自定义工具行,指向自定义工具栏模板选择器defaultToolbar: ['筛选','打印','导出']});});上面的toolbar: '#toolbarDemo '这句代码是这个功能的关键代码

以上这篇获得自定义工具栏的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+