【问题来了】针对若依Ruoyi开源项目的个性化改造问题

最新推荐文章于 2025-04-25 09:32:31 发布

小飞快跑

最新推荐文章于 2025-04-25 09:32:31 发布

阅读量5.7k

点赞数 15

CC 4.0 BY-SA版权

分类专栏：问题来了文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/weixin_41354371/article/details/115381271

本文介绍了在使用若依RuoYi开源项目时进行的一些前端个性化改造，包括表格边框添加、表格头部行错位修复、控制打开窗口数量、搜索栏收起展开、列表首列序号显示以及列表固定分页栏等，提供了详细的实现步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

若依RuoYi是一个目前相当火热的、完全开源的、界面简洁美观、基础功能十分齐全、能轻松上手的后台管理系统，基于经典主流技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），既可以让初学者很快技术入门，也可以让开发者注重专注业务，降低技术难度，从而节省人力成本，缩短项目周期，提高软件安全质量。
在使用过程中，肯定会一些个性化的改造设计需求，特别是偏传统的行业，在界面上就会偏向以前的easyUi的风格和使用习惯，以下就是在开发中的一些改变尝试，有些是从其他博主借鉴来，如果侵权，请多多包涵。

一、表格加上边框

这个问题，原项目上已经实现，先看效果，上图是无边框，下图为有边框
无边框效果
在这里插入图片描述
对比下，虽然BootstrapTable 风格的表格比较时尚潮流，但是DataGrid风格也还是耐看，可能是作为一个老码农的情怀了。
实现方式如下：

<!-- 原代码 ->
<div class="col-sm-12 select-table table-striped">
	            <table id="bootstrap-tree-table">         </table>
</div>
<!-- 新代码 ->
<div class="col-sm-12 select-table">
	            <table id="bootstrap-tree-table" class="table table-bordered" ></table>
</div>

没错，在列表页面中，table标签的样式中加入table table-bordered ，table标签的父级div去掉样式table-striped即可，相当美好，那种横横竖竖的格子给人一种整整齐齐的感觉，舒服
另外补充一点，如果是 bootstrapTreeTable 表格树要加边框，以上的操作不够的，如下：
在这里插入图片描述
表格树加了table table-bordered 两个样式后只是外框有边框，里面各个单元格却没有边框，解决方案如下：
在 templates/include.html 的 head 标签之前加入以下代码

<style>
	   /**解决tree表格无边框 **/
	   .bootstrap-tree-table .treetable-thead th,.bootstrap-tree-table .treetable-tbody td{
    
    
	      border-left:1px solid #e7eaec  !important;
	      border-bottom:1px solid #e7eaec  !important;
	   }
</style>

完美解决，脑补下，就不上图了

二、表格头部行错位

就是这个问题，曾一度把我的强迫症弄犯了，不行你瞧瞧这效果，你能忍吗，不过由于是一个效率出现的问题，我现在居然无法复现了，你说尴尬不，曾经多么想解决问题，现在就有多么想他出现，直接上方案吧
还是在 templates/include.html 的 head 标签之前加入以下代码

<style>
	    /**解决表头错位 **/
	   .table{
    
    table-layout: fixed;}
</style>

这段代码专治各种不服，前提是要在 table 标签上加上 table 样式

三、控制打开窗口数量

由于系统采用的多窗口模式，可以同时打开多个页面窗口，方便多页面切换，避免页面的重刷，但是过多的页面打开后，势必会造成浏览器的缓存压力，因而就有了控制窗口数量的需求，效果如下：
在这里插入图片描述
实现方案如下：
1、在 参数设置 中新增允许菜单窗口打开的数量

2、在 IndexController.java 类的 index(ModelMap mmap) 方法中获取该参数，并传到页面中

mmap.put("openMenuCount", configService.selectConfigByKey("sys.index.openMenuCount"));

3、在 index.html 页面的 javascript 块中，获取参数并储存起来

//可打开菜单数量
var openMenuCount = [[${
   
   openMenuCount}]];
storage.set('openMenuCount', openMenuCount);

4、在 common.js 文件中新增js方法 checkMenuTabCountOver

/** 检测菜单选项卡超出数量 **/
function checkMenuTabCountOver(){
   
   
   var topWindow = $(window.parent.document);
    var menuOpenCount=0;
    $('.menuTab', topWindow).each(function(