QiYuAdmin-BootStrapTable增加通用的搜索功能（Metronic实战）

最新推荐文章于 2024-09-19 11:08:42 发布
最新推荐文章于 2024-09-19 11:08:42 发布
阅读量5.5k 收藏 4
点赞数 2
分类专栏： Metronic干货系列 文章标签： QiYuAdmin springBoot Metronic实战 通用后台管理系统 权限管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqy_zq_zxl/article/details/72810931
版权
本文介绍了如何在QiYuAdmin项目中，基于Metronic前端模板的BootStrap-Table增加通用搜索功能。通过梳理共用的js和css，实现对表格的多个搜索条件，提高用户体验。文章详细讲解了搜索功能的现状、实现结果以及需要注意的初始化配置，以方便后续类似功能的快速应用。
摘要由CSDN通过智能技术生成

简介

QiYuAdmin项目的前端是基于漂亮的前端模板Metronic的，现在的版本是V4.7版本，由于没有提供开发的详细文档，只能慢慢的摸索，正好公司的项目也用到了，所以就将自己开发的过程中的一些经验给整理出来，努力做出一个基于Metronic模板的中文文档出来，给分享出来。这篇文章主要是将bootstrap-table插件增加通用的搜索条件功能，方便以后类似的功能直接调用封装好的共用js方法。

  • 共用js和css梳理结果
  • BootStrap-Table增加搜索功能

共用js和css梳理结果

上一篇文章 QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)，最终梳理了一下项目的共用js和css，还有把首页也给整理了一下，感觉轻松很多啊。

共用的css文件

这里写图片描述

共用的js文件

最低0.47元/天 解锁文章
Metronic V5.1.7-bootstrap版本.rar
09-16
总的来说，Metronic V5.1.7 bootstrap版本是一个全面的前端解决方案，它集成了Bootstrap的强大功能和Metronic的定制化设计，提供了一站式的开发体验。无论你是要构建一个企业级的Web应用，还是想要为个人项目增添...
FastAdmin列表实现自定义搜索及传值
工作遇到问题的归纳总结
08-12 1万+
FastAdmin列表实现自定义搜索及传值
fastadmin:搜索框，刚进入页面，不需要点击放大镜就能显示搜索框
weixin_46001736的博客
02-23 692
fastadmin:搜索框，刚进入页面，不需要点击放大镜就能显示搜索框
一张图解析FastAdmin中的表格列表（bootstrap-table）的功能（备份）
最新发布
向宇
09-19 2120
请根据图片上的数字索引查看对应功能说明。1.菜单名称和描述 默认生成的CRUD是没有菜单名称和描述显示的，如果需要显示则可以修改->，给对应菜单的添加上备注信息后即可显示，支持HTML2.TAB过滤选项卡 在一键生成CRUD时，如果表中存在字段且为类型，则会生成相应的TAB过滤选项卡，如果需要生成其它字段的过滤选项卡则可以在使用时使用来指定字段3.通用搜索 通用搜索的的内容是根据配置的字段决定的，渲染的内容及格式由FastAdmin自动进行渲染，如果需要禁用或删除某一选项，可以在JS中配置来删除通用搜索中的
vue 使用 el-table 添加搜索框 实现简单搜索功能 ，同时判断输入是否为空
热门推荐
潮汐未见潮落的博客
06-18 1万+
实现 el-table 的搜索功能，判断输入内容是否为空
如何使用jq实现bootstrapTable以及使用其他搜索框控制bootstrapTable中的搜索
熟悉 vue2 vue3 jquery js echarts
03-06 1317
如上图 点击查询 需要在 bootstrap-table.js中新写入的自定义搜索方法 如果不想用自带的搜索 可以点击按钮触发将搜索字段改为新写的搜索框内容。官网链接：https://f4nniu.gitee.io/bootstrap-table-home/zh-cn/getting-started/先找到js文件里面的resetSearch 方法 在下面写入新方法。
bootstraptable表头添加自定义搜索框（带文本,下拉,弹窗多选搜索）
m0_70521709的博客
05-09 1836
2、JavaScript部分 var $table = $(‘#table’); var $table_quer 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 yParams = {}; var WorkProcedureIn_arry = []; var WorkProcedureNotIn_arry = []; //脚本入口 $(document).ready(function () { initTable(); ...
bootstrap-METRONIC 4
07-06
Bootstrap-METRONIC 4 是一个基于流行的前端开发框架 Bootstrap 的高级主题和模板集合，专为构建现代响应式和交互式网站而设计。这个框架以其灵活性、可定制性和丰富的组件库而闻名，使得开发者能够快速地搭建专业...
metronic-bootstrap
08-13
4. **高级页面示例**：Metronic-Bootstrap提供了诸如仪表板、图表、表格、地图、用户管理、邮件系统等常见后台功能的示例页面，帮助开发者快速搭建功能齐全的后台管理系统。 5. **JavaScript插件集成**：模板集成了...
Metronic-3.6-Bootstrap-3.3.1
12-17
Metronic 是一套精美的响应式后台管理模板，基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面，6 种颜色可选，76 个模板页面，包括图表、表格、地图、消息中心、监控面板等后台...
Metronic V5.1-bootstrap版本 (注意：是bootstrap版本的，没有angular版本)
05-09
Metronic 基于 Twitter Bootstrap 3.3.4 框架实现。 注意，这个压缩包是bootstrap版本的，下载解压后 dist 目录里面是 10套模板，docs 里面是文档说明 src 和 tools 里面是引用的js和css文件。 绝对正版，可惜这个...
Bootstrap Table 搜索框和查询功能
12-29
1..知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询匹配对象 var $button = $('<div class=columns><button class=btn btn-default type=button name=refresh title=查询><i class=g
bootstrap-table的使用（3）--自定义搜索功能，数据库查询一个时间段内的内容并显示为例
baidu_31788709的博客
10-22 9435
自定义搜索功能 bootstrap-table是自带搜索功能的，但是搜索功能比较单一，如果我们有特殊的要求，那么需要自己写一个搜索功能，主要是应用于进行数据库查询，并将结果展示。 大致流程为： 1、利用bootstrap-table自带的url传值，传递参数到servlet。 2、在servlet中进行数据库查询，然后将数据库内容进行整理，整理成JSONArray和JSONObject的数据格式。......
bootstap-table 插件，实现自定义搜索
frykool的专栏
08-28 8874
//search按钮绑定查询事件 $('#dosearch').click(function() { var params = $('#table-pagination').bootstrapTable('getOptions') params.queryParams = function(params) { //定义参数 var search = {}; //遍历
Bootstrap-table中toolbar中新增条件查询及refresh参数使用
OceanSky的专栏
05-17 8844
我们想要在bootstrap-table中自定义查询条件如何实现呢？这些自定义的按钮、输入框是定义在哪个位置呢？还记得上一节中我们在配置中有这样一个属性： //工具按钮用哪个容器 toolbar: '#toolbar', &amp;lt;div id=&quot;toolbar&quot;&amp;gt;&amp;lt;/div&amp;gt; 我们定义的查询条件就是放入到这个div中的，先看一下我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山竹之七语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值