layui 关于defaultToolbar扩展图标功能的一点学习

最新推荐文章于 2024-07-18 17:33:01 发布
最新推荐文章于 2024-07-18 17:33:01 发布
阅读量1.3w 收藏 4
点赞数 2
分类专栏： 前端 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wayrboy/article/details/102618210
版权
本文介绍了如何在layui的defaultToolbar中添加自定义图标，并详细讲述了在遇到事件监听问题时，从查阅文档、确认事件到查看源码、添加自定义监听的解决过程，提供了具体的函数和功能实例。
摘要由CSDN通过智能技术生成

这里写自定义目录标题

目标

想在defaultToolbar添加一个自定义图标,并添加一定的功能

过程

  1. 翻文档
    文档链接
    图标按照文档成功添加
 defaultToolbar: ['filter', 'exports', {
                    title: '全局设置',
                    layEvent: 'setting',
                    icon: 'layui-icon-set-fill',

                }]

添加成功
2. 事件监听
在这里插入图片描述
我按照文档形式监听了tool事件,但是我发现监听不到事件

处理

  1. 检查了事件和版本号都正确
  2. 查询了源码看了一下作者的写法
  3. 在源码的基础上添加自己的事件监听
    源码是在table.js
    打开table.js源码后
    1. 搜索LAYTABLE_PRINT
最低0.47元/天 解锁文章
深邃如海
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui table工具栏点击时间_layui中的table中toolbar自定义过程
weixin_39995764的博客
12-19 367
1. 强大的弹窗表格搜索插件2.treeTable组件3.下拉列表、下拉树组件4.layui图片管理组件自己挖过的坑需要自己来填。layui的table默认表头工具栏右边有3个操作，分别是过滤字段、导出excel、打印功能。在js中代码添加toolbar即可实现上面的效果：table.render({elem:'#demo',height:420,url:'/demo/table/user/' /...
layui 的数据表单的defaultToolbar参数中筛选列，图标，打印，三个功能，调用单独拿出使用
L_Augety的博客
08-11 9906
layui 的数据表格的defaultToolbar参数中筛选列，图标，打印，三个功能，调用自己按钮，单独拿出使用
Layui：一款强大的前端UI框架
m0_46413639的博客
06-04 554
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
layui自定义defaultToolbar 新增按钮 隐藏列表操作栏浮动部分
最新发布
qq_16659821的博客
07-18 604
layui自定义defaultToolbar 新增按钮 隐藏列表操作栏浮动部分
layui table 的defaultToolBar导出时 更改默认文件名
xiaoxiao48的博客
07-15 1100
参考：https://my.oschina.net/u/3917458/blog/4320202
layui自定义工具栏的方法
12-13
给大家分享的功能是layui自定义工具栏 功能效果：开启数据表格头部工具栏区域 关键参数：toolbar 参数类型：String/DOM/Boolean 参数说明： toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器 toolbar: ‘xxx’ //直接传入工具栏模板字符 toolbar: true //仅开启工具栏，不显示左侧模板 toolbar: ‘default’ //让工具栏左侧显示默认的内置模板 在这里我用的是第一种toolbar:’#toolbarDemo’，就是调用自己定义的工具栏的模板选择器 功能效果图： 已封装好的自定义工
关于layui的动态图标不显示的解决方法
10-16
4. **JavaScript异常**：如果依赖layui的某些功能，如动态加载图标，那么确保layui的JavaScript代码没有执行错误。 5. **浏览器兼容性**：检查你使用的浏览器是否支持layui的CSS3动画效果，部分老版本的浏览器可能不...
解决layui使用layui-icon出现默认图标的问题
10-16
今天小编就为大家分享一篇解决layui使用layui-icon出现默认图标的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 实现表格某一列显示图标
10-16
本篇文章将详细介绍如何使用layui实现在表格中某一列显示图标，以此增强数据的可读性和视觉效果。 layui的表格组件（layui table）是一个强大的工具，它可以轻松地处理复杂的数据展示，并且提供了高度自定义的选项...
layui字体图标 loading图标静止不旋转的解决方法
10-16
今天小编就为大家分享一篇layui字体图标 loading图标静止不旋转的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于Vue和Javascript的layui-table扩展插件设计源码
05-31
layui-table扩展插件项目源码，共321个文件，采用JavaScript、CSS、HTML和...该项目是一个基于Vue和Javascript的layui-table扩展插件设计，旨在提供一个高效、稳定的扩展解决方案，以增强layui-table的功能和灵活性。
漂亮头部工具栏切换
11-01
漂亮的头部工具栏切换 html页面 可自己修改
layui自定义工具栏
weixin_44588946的博客
06-09 8159
layui自定义工具栏 给大家分享的功能是layui自定义工具栏 功能效果：开启数据表格头部工具栏区域 关键参数：toolbar 参数类型：String/DOM/Boolean 参数说明：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器 toolbar: ‘xxx’ //直接传入工具栏模板字符 toolbar: true //仅开启工具栏，不显示左侧模板 toolba...
Layui中的table中toolbar自定义过程
夏已微凉、
05-22 4254
一、3个都显示1、图片2、代码二、自定义显示[筛选列-filter]1、图片2、代码三、工具栏监听1、监听筛选列、导出列、打印列2、监听自定义按钮四、参考地址 一、3个都显示 1、图片 2、代码 table.render({ ... ,toolbar: true //开启工具栏 ... }); //或 table.render({ ... ,toolbar:'default' //开启工具栏 ... }); 二、自定义显示[筛选列-filter] 1.
layui 设置table 右上角工具栏
yyd6976的博客
04-16 2144
defaultToolbar: []
layui 给table里面的添加图标_layui中的table中toolbar自定义过程
weixin_35906775的博客
01-13 1726
自己挖过的坑需要自己来填。layui的table默认表头工具栏右边有3个操作，分别是过滤字段、导出excel、打印功能。在js中代码添加toolbar即可实现上面的效果：table.render({elem:‘#demo‘,height:420,url:‘/demo/table/user/‘ //数据接口,title: ‘用户表‘,page:true //开启分页,toolbar: ‘defaul...
layui table 头部工具栏右侧图标隐藏，增加
hello_world_1996的博客
06-11 2610
defaultToolbar - 头部工具栏右侧图标 类型：Array，默认值：[“filter”,“exports”,“print”] 该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值： filter: 显示筛选图标 exports: 显示导出图标 print: 显示打印图标 可根据值的顺序显示排版图标，如： defaultToolbar: ['filter', 'print', 'exports'] 可以无限扩展图标按钮（layui 2.5.5 新增）： table.rende
Layui表格头部工具栏取消默认的三个功能
qq_38152400的博客
12-28 4459
在toolbar开启的状态下，通过配置defaultToolbar: [] 可以取消默认的所有功能，默认开启的是所有的defaultToolbar: [ ‘filter’, ‘print’, ‘exports’] layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/zjjgx/getData'
layui table工具栏点击时间_layui工具栏按钮监听事件
weixin_31746993的博客
12-29 1346
layui工具栏按钮监听事件给大家分享的功能是layui工具栏按钮监听事件Layui工具栏按钮监听事件：点击头部工具栏区域设定了属性为lay-event="" 的元素时触发关键属性为lay-event=""效果图：图一是查询按钮的监听事件效果图二是新增按钮的监听事件效果图三是修改按钮的监听事件效果图四是删除按钮的监听事件效果图五是刷新按钮的监听事件效果需要用到的css、js样式：按钮代码：按钮是用...
layui的unicode加号图标
05-12
在layui中，加号图标的Unicode是："\ue654"。可以通过以下方式在页面中使用： ```html <i class="layui-icon"> ``` 或者在CSS中使用： ```css .layui-icon-add:before { content: "\ue654"; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值