layui 的数据表单的defaultToolbar参数中筛选列,图标,打印,三个功能,调用单独拿出使用

news2025/1/24 8:35:15

项目场景:

参数之defaultToolbar:`

在使用layui开发的过程中,常常会用到 数据表单 这一关键模块,在这里讲一下defaultToolbar:['filter',exports 'print']-------“头部工具栏右侧图标”,如何将这三个按钮调用出来,给自己的按钮使用!!

第一次尝试写博客,多谢关照啦~~~


问题描述

只能调用用layui中的defaultToolbar:['filter',exports 'print']参数才能使用三个功能么? 答案:不!

例如:平常使用layui数据表单,defaultToolbar参数根据文章中的提示 调用

<!-- 摘抄layui 数据表格文档模板内容 -->


<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/static/json/table/user.json' //数据接口
    ,defaultToolbar:['filter',  'exports','print']  //本章讲述的参数!!!!!!!!!!
    ,title:'打印按钮标题内容' 
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}

  });
  
});
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

解决方案:

记住这三个class 样式

筛选列 : lay-event="LAYTABLE_COLS"
导出: lay-event="LAYTABLE_EXPORT"
打印: lay-event="LAYTABLE_PRINT"

前端html

先写三个按钮

        <button type="button" class="layui-btn layui-btn-sm " >筛选列</button>  
        <button type="button" class="layui-btn layui-btn-sm ">导出</button>
        <button type="button" class="layui-btn layui-btn-sm">打印</button>

在这里插入图片描述

给上面三个按钮,分别引用到 每个<button class=''></button>

筛选列 : lay-event="LAYTABLE_COLS"
导出: lay-event="LAYTABLE_EXPORT"
打印: lay-event="LAYTABLE_PRINT"
引入后代码:

 <button type="button" class="layui-btn layui-btn-sm " lay-event="LAYTABLE_COLS">筛选列</button>

<button type="button" class="layui-btn layui-btn-sm " lay-event="LAYTABLE_EXPORT" >导出</button>
   
 <button type="button" class="layui-btn layui-btn-sm" lay-event="LAYTABLE_PRINT" >打印</button>

效果:

因为调用layui组件,所以每个功能和以往一样,只是换了个按钮而已~~~

筛选列

在这里插入图片描述
导出
在这里插入图片描述
··

  • 嗯?问题来了,怎么点击按钮后,弹出框是空白的???

其实有两个按钮,只不过弹框里的字体颜色和背景颜色同样是 白色,混色了,所以看不见,如果你拿鼠标触碰一下,会有两个选框的。

  • 怎么解决?
    加个样式,改一下字体颜色就行了,
    为了方便查看。我这里改了按钮字体颜色和按钮背景
    代码:
    class="layui-btn-warm layui-btn-sm layui-red"
 <button type="button" class="layui-btn-warm layui-btn-sm layui-red" lay-event="LAYTABLE_EXPORT" >导出</button>

如图:
在这里插入图片描述
然后就出来了:
因为我用的字体颜色是 黑色layui-btn-warm所以里面字体颜色也是黑色
在这里插入图片描述
点击后,两个导出的文本格式选项就不用我演示了吧,自己点去吧,哈哈,,和layui组件一样

打印:
又重新粘贴了遍代码,就不演示,能正常操作,弹窗打印,自己尝试吧

<button type="button" class="layui-btn layui-btn-sm" lay-event="LAYTABLE_PRINT" >打印</button>

总结


就是调用这三个类
筛选列 : lay-event="LAYTABLE_COLS"
导出: lay-event="LAYTABLE_EXPORT"
打印: lay-event="LAYTABLE_PRINT"

好啦,到此为止啦,小伙伴们去尝试一下吧~~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407950.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【vscode】vscode常用插件介绍

1、Angular Snippets&#xff08;angular片段&#xff09; 这个扩展为 TypeScript 和 HTML 添加了 Angular 的代码片段。 2、Auto Close Tag&#xff08;自动闭合标签&#xff09; 自动添加 HTML/XML 关闭标记。 3、Auto Rename Tag&#xff08;自动重命名标签&#xff09; 自…

Three.js基础入门系列(九)--导入3D模型

先来学习今天的知识——Three.js导入3D模型 复杂的3D模型&#xff08;比如制作一个飞机模型&#xff09;一般都是用第三方建模工具生成&#xff0c;然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址&#xff1a;https://www.autodesk.com.cn/products/3ds-max/over…

启动vue-element-admin 安装npm install报错npm ERR! code 128npm ERR! An unknown git error occurre

使用vue-element-admin前端项目&#xff0c;前提是有nodejs环境&#xff0c;对于此环境的安装可以参考网上的博客。此博客用于记录启动项目以及遇到的问题、并解决问题的过程。1、介绍vue-element-admin是基于element-ui 的一套后台管理系统集成方案 。功能&#xff1a;https:/…

Vue基础教程(下篇)

&#x1f60a;作者简介&#xff1a;大家好&#xff0c;我是是你的大头呢&#xff0c;一名大三学生&#xff0c;考研备考中。让我们一起加油&#xff0c;一起努力&#xff01; &#x1f9d1;‍&#x1f4bb;博客主页&#xff1a;是你的大头呢 &#x1f970;欢迎关注&#x1f38a…

javascript 中搜索数组的四种方法

前端经常要通过 javaScript 来处理数组中的数据&#xff0c;其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值&#xff0c;这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。 在 ECMAScript6 之前&#xff0c;最常用的方法…

Vue中 this.$set的用法

一、this.$set能够实现什么功能 官方解释&#xff1a;向响应式对象中添加一个属性&#xff0c;并确保这个新属性同样是响应式的&#xff0c;且触发视图更新。它必须用于向响应式对象上添加新属性&#xff0c;因为 Vue无法探测普通的新增属性 (比如 this.myObject.newProperty …

pdf在线预览 pdf.js的使用

1.官网&#xff1a;https://mozilla.github.io/pdf.js/ 2、使用方法 1&#xff09; 通过官网&#xff0c;下载pdfJs插件包&#xff0c;放至项目中&#xff1b; window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );2&#xff09;将下载的pdfJS…

uniapp封装axios?大可不必那么麻烦。

最近群里的一个小明同学问 uniapp可以使用axios请求吗&#xff1f;我当时就一愣 反问为什么要使用axios&#xff0c;是 uni.request 不香了吗&#xff1f; 小明&#xff1a;因为axios可以像vue的项目一样&#xff0c;在request里面封装巴拉巴拉一堆。 我&#xff1a;那uni.re…

微信小程序开发使用onreachBottom实现页面触底加载及分页

目录 一 简要介绍一下onreachBottom事件 二 实例展示 三 遇到的一些问题 一 简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样&#xff0c;都属于小程序的生命周期事件&#xff0c;作用就是在页面下拉到底部时触发这个事件&#xff0c;一般适用于数据比较…

一次跨域的坑Faild to load response data: No resourse with given identifier found

有一个导出接口&#xff0c;前后端都没有动过&#xff0c;之前也测试过没有问题。上到测试环境后&#xff0c;测试环境加了证书&#xff0c;报错了。 先是后端小朋友和我说了这个问题&#xff1a; 浏览器控制台打印信息(聊天记录中那张图)&#xff1a;然后我问他操作了哪个页面…

vue3.0教程——搭建Vue脚手架【简化版】

目录 哈喽&#xff0c;大家好丫&#xff0c;你们的小郭子又来啦 ~ 一、环境要求 &#xff08;1&#xff09;node安装&#xff08;前端开发环境&#xff09; &#xff08;2&#xff09;vue-cli脚手架安装 二、安装依赖 &#xff08;1&#xff09;使用命令行安装以下依赖 &a…

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动&#xff0c;且添加对应点击事件的简单整理 目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动&#xff0c;且添加对应点击事件的简单整理 一、简单介绍 二、安装和使用 三、效果图 四、vue-seamless-scroll 点击事件…

(网页开发/前端)配置VsCode,让您拥有更舒适的开发环境

vscode&#xff0c;微软旗下的一款强大的IDE集成开发环境&#xff0c;现在&#xff0c;越来越多的网页开发人员选择使用vscode来敲代码。 但是&#xff0c;在不添加任何扩展的vscode中&#xff0c;想要享受“丝滑”的开发体验是比较困难的。所以&#xff0c;接下来&#xff0c;…

js从地址栏获取参数

一、过程分四步&#xff1a; 1.获取地址栏&#xff1b; var loclocation.href; 2.获取地址栏的长度 var n1loc.length; 3.获取地址栏中第一个等号的位置&#xff1b; var n2loc.indexOf()&#xff1b; 4.以等号位置&#xff0c;截取后面的内容&#xff1b; var strloc.slice(n2…

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。 其排列与使用 for...in 循环遍历该对象时返回的顺序一致&#xff08;区别在于 for-in 循环还会枚举原型链中的属性&#xff09;。 语法 Object.entries(obj) 参数 obj&#xff1a;可以返回其可枚举属性…

VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)

概述 写完代码后&#xff0c;最常用、简单的发布方式&#xff0c;就是将应用发布到文件夹&#xff0c;然后将publish文件夹复制到要部署的机器上&#xff08;本地、局域网服务器、云服务器等&#xff09;。 但是在实际工作中&#xff0c;可能会遇到需要频繁地发布&#xff0c…

vue--后台管理系统问题和功能实现思路集锦

目录 一、动态菜单 1、问题&#xff1a;点击菜单&#xff0c;其他菜单都会打开&#xff0c;且选中某个菜单&#xff0c;其他菜单都会选中 2、问题&#xff1a;home页面代码内动态菜单数据获取的位置 二、动态路由 1、问题&#xff1a;刷新home页面后&#xff0c;页面报错&…

微信小程序开发(遇到的报错和注释)

一开始验证文章出错了&#xff0c;一直运行不起来&#xff0c;取消设置&#xff0c;可以正常调用。 页面小程序窗口组件部分&#xff1a;navigationbar导航栏区域&#xff0c;background背景区域&#xff08;默认不可见&#xff0c;下拉才显示&#xff09;、页面的主题区域&am…

教你一文解决 js 数字精度丢失问题

文章目录一、关于为什么要解决精度丢失二、怎么解决js的计算精度丢失问题&#xff1f;三、toPrecision 特定方法返回四舍五入长度字符串结语一、关于为什么要解决精度丢失 可以看下例子&#xff0c;因为js失去精度问题也是常见的问题&#xff0c;正常我们可以四舍五入或者 toF…

vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目&#xff0c;前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑&#xff0c;但是网上的资料较少&…