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

最新推荐文章于 2024-06-04 17:34:22 发布
最新推荐文章于 2024-06-04 17:34:22 发布
阅读量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字符串会发现作者的事件监听函数
    2. 添加自己的事件监听
最低0.47元/天 解锁文章
深邃如海
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
LayUI中的内置模块之 table 数据表格文档(layui 重点维护的项目之一)
daimeijin的博客
08-14 6770
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 table 数据表格文档 table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务
layUI 工具栏 增加自定义帮助按钮
xnattack的博客
06-09 2241
/** * 封装的tips，适配laytable的配色，点击提示框外会关闭提示（layer.tips无法点击空白处隐藏tips） * @param html 提示内容 * @param ele 绑定对象 */ tips(html, ele) { let style = document.createElement("style"); style.appendChild(document.createTextNode("...
layui 的数据表单的defaultToolbar参数中筛选列，图标，打印，三个功能，调用单独拿出使用
L_Augety的博客
08-11 9725
layui 的数据表格的defaultToolbar参数中筛选列，图标，打印，三个功能，调用自己按钮，单独拿出使用
Layui：一款强大的前端UI框架
最新发布
m0_46413639的博客
06-04 450
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
前端学习笔记
码农的博客
12-17 728
CSS 选择器 优先级：id选择器 > class选择器 > 标签选择器 后代选择器 body p{ background:red; } 子选择器一代 body>p{ background:#3cbda6; } 相邻兄弟选择器同辈,只有一个，相邻（向下） .active + p{ background:yello; } 通用选择器当前选中元素的向下所有兄弟元素 .active~p{ background:#02ff0
LayUi数据表格
蒲公英的博客
11-05 783
数据表格 表格重载 很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。 table.reload(ID, options, deep) 【所有渲染方式】 参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false 注意：deep 参数为 layui 2.6.0 开始新增。 tableIns.rel
layui的数据表格，自定义添加按钮且可实现动态切换
L_Augety的博客
01-25 2047
layui的数据表格，自定义添加按钮且可实现动态切换，实现不同按钮替换操作
关于layui的动态图标不显示的解决方法
10-16
今天小编就为大家分享一篇关于layui的动态图标不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决layui使用layui-icon出现默认图标的问题
10-16
今天小编就为大家分享一篇解决layui使用layui-icon出现默认图标的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui字体图标 loading图标静止不旋转的解决方法
10-16
今天小编就为大家分享一篇layui字体图标 loading图标静止不旋转的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
漂亮头部工具栏切换
11-01
漂亮的头部工具栏切换 html页面 可自己修改
layui 实现表格某一列显示图标
10-16
今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于Vue和Javascript的layui-table扩展插件设计源码
05-31
layui-table扩展插件项目源码，共321个文件，采用JavaScript、CSS、HTML和...该项目是一个基于Vue和Javascript的layui-table扩展插件设计，旨在提供一个高效、稳定的扩展解决方案，以增强layui-table的功能和灵活性。
Layui中的table中toolbar自定义过程
夏已微凉、
05-22 4220
一、3个都显示1、图片2、代码二、自定义显示[筛选列-filter]1、图片2、代码三、工具栏监听1、监听筛选列、导出列、打印列2、监听自定义按钮四、参考地址 一、3个都显示 1、图片 2、代码 table.render({ ... ,toolbar: true //开启工具栏 ... }); //或 table.render({ ... ,toolbar:'default' //开启工具栏 ... }); 二、自定义显示[筛选列-filter] 1.
LayUI 问题汇总
ling1998的博客
05-16 1553
1、警告信息 前提条件：使用的是Chrome浏览器 警告信息（如下图所示）：DevTools failed to load source map: Could not load content for http://localhost:8088/js/lay-module/auth/jwt-decode.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE 解决：这个警告信息并不影响使用，如果不想显示这个警
layui table 的defaultToolBar导出时 更改默认文件名
xiaoxiao48的博客
07-15 1089
参考：https://my.oschina.net/u/3917458/blog/4320202
layui 设置table 右上角工具栏
yyd6976的博客
04-16 2132
defaultToolbar: []
layui table 头部工具栏右侧图标隐藏，增加
hello_world_1996的博客
06-11 2576
defaultToolbar - 头部工具栏右侧图标 类型：Array，默认值：[“filter”,“exports”,“print”] 该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值： filter: 显示筛选图标 exports: 显示导出图标 print: 显示打印图标 可根据值的顺序显示排版图标，如： defaultToolbar: ['filter', 'print', 'exports'] 可以无限扩展图标按钮（layui 2.5.5 新增）： table.rende
layui的unicode加号图标
05-12
在layui中，加号图标的Unicode是："\ue654"。可以通过以下方式在页面中使用： ```html <i class="layui-icon"></i> ``` 或者在CSS中使用： ```css .layui-icon-add:before { content: "\ue654"; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值