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

前言

若依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() {
    	menuOpenCount++;
    });
    var openMenuCount=storage.get('openMenuCount');
    if(openMenuCount > 0 && menuOpenCount>=openMenuCount){
    	$.modal.alertWarning("同时开启窗口最多不能超过"+openMenuCount+"个，请先关闭其它不用的窗口");
		return false;
    }
    return true;
}

5、同样在 common.js 文件中，找到 createMenuItem(dataUrl, menuName) 方法，然后在其中加入刚刚新增的方法checkMenuTabCountOver

然后就可以了

四、批量设置搜索栏的收起与展开

在不改变每个页面的元素基础上，在js中批量设置搜索栏的收起与展开效果，主要用于搜索项过多，将搜索栏撑着太高，导致列表数据栏的空间缩小或者会滑动太多，现在只展示一行的搜索，更多搜索项的收起，在必要时在展开，效果如下：


实现步骤如下：
1、打开 ry-ui.js 文件，在文件开头处有一个 table 对象，在对象中加入以下两个方法

//重置更多查询 //实现高级条件查询
	resetMoreSelect:function (){
    	var selectCount=0;
    	var lastWidth=0;
    	$(".select-list li").each(function() {
    		selectCount++;
    		lastWidth=$(this).width();
        });
    	//先删除按钮
    	$("#moreSelect").remove();
    	var widths=$(".select-list").width();
    	lastWidth=184;
    	var leftCount=parseInt((widths-35-lastWidth)/280)+1;
    	var index=1;
    	//默认状态 0为关闭  1 为开启 
    	var defaultState=0;
    	$(".select-list li").each(function() {
    		if(index>=leftCount && index<selectCount && defaultState == 0){
    			$(this).hide();
    		}else{
    			$(this).show();
    		}
    		//需要加入更多查询按钮
    		if(selectCount>leftCount && index==selectCount && $("#moreSelect").length <= 0){
    			var newHtml='<a id="moreSelect" class="btn btn-success btn-rounded btn-sm" οnclick="table.showMoreSelect(this)" data-value="0"><i class="fa fa-angle-double-down"></i>&nbsp;更多</a>';
    			$(this).append(newHtml);
    		}
    		index++;
        });
	}, //展示更多查询
	showMoreSelect:function(obj){
		  // 0为关闭  1 为开启 
		 var value = $(obj).data('value');
		 if(value == 0){ //展开
			 $(".select-list li").each(function() {
		    		//$(this).fadeIn();
		    		$(this).show();
		        });
			 $(obj).data('value',1);
			 $(obj).html('<i class="fa fa-angle-double-up"></i>&nbsp;收起');
		 }else{  //关闭
			table.resetMoreSelect();
		 }
		 //setTimeout(function(){table.resetTableHeight();},500);
		 table.resetTableHeight();
	}

2、同样是ry-ui.js 文件，找到 table:init() 与 treeTable:init() 两个初始化表格方法，并在方法最后面加上

table.resetMoreSelect();

然后就可以了。
其原理为每次页面表格初始化时，就会调用 table.resetMoreSelect() ，这个方法里面就会找到页面中 样式为 select-list 的 div 以及其中的li 标签代表的搜索项，先计算搜索栏的宽度，然后计算一行可以展示固定宽度搜索项的数量，将多余的搜索项隐藏，并追加一个 更多 按钮，当点击 更多按钮时，将其他隐藏的搜索项重新展示，并将按钮更多 文字改为收起，点击收起的操作就与首次初始化一样了
其优势在于直接js中添加初始化的操作，无需改变每个页面
劣势为需要固定每个搜索项的宽度，当然也可以通过动态计算每个搜索项的宽度，然后在计算一行可以展示的个数（目前没有实现）

五、批量设置列表首列的序号列

这个效果就是类似与EasyUIDatagrid 那样有一列专门表示行号或者序号，可以很好知道当前行的位置，翻页后也会继续连号，上效果：


这个问题的思路就是在表格初始化的时候，动态的给表格加一列序号列，这样就可用参数控制表格是否需要此列：
1、找到并打开 ry-ui.js 文件，找到 table:init() 方法，添加一个 showRowNo: true, //展示序号列（行号） 参数

2、在 init() 方法下面接着加入以下代码

var options = $.extend(defaults, options);
            	//批量插入序号
            	var columns = options.columns;
                if(options.showRowNo){
	            	columns.splice(0,0,{
	                    title: '',
	                    align: 'center',
	                    width: '40px',
	                    halign: 'center',
	                    formatter: function (value, row, index) {
	                        var options = $('#bootstrap-table').bootstrapTable('getOptions');
	                        return '<span style="word-break: break-word">'+(options.pageSize * (options.pageNumber - 1) + index + 1)+'</span>';
	                    }
	                });
                }

3、由于 showRowNo 默认为true，列表页面打开就会展示序号列，如果不需要此效果，就在页面初始化表格是将此参数改为 false
4、不过在此js文件中有一个查询表格首列值的方法selectFirstColumns，由于新增了一列，就会导致 id 列排到第二列了，就需要调整该方法，主要是判断是否有添加序号列，从而改变获取受首列值的序号 index ，修改后的方法如下：

 // 查询表格首列值
            selectFirstColumns: function() {
	            var index = 1;
                if(table.options.showRowNo){ //如果展示行号，取第二位
					index = 2;
				}
            	var rows = $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) {
        	        return $.common.getItemField(row, table.options.columns[index].field);
        	    });
            	if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {
            		var selectedRows = table.rememberSelecteds[table.options.id];
            		if($.common.isNotEmpty(selectedRows)) {
            			rows = $.map(selectedRows, function (row) {
                            return $.common.getItemField(row, table.options.columns[index].field);
                        });
            		}
            	}
            	return $.common.uniqueFn(rows);
            },

至此该问题就完美解决啦

六、列表固定分页栏

该效果是在列表数据过多时或浏览器窗口变小时，整体页面不会出现滚动条，只在列表块自动调整高度出现滚动条，先看看修改前的效果：

再看看调整后的效果：

一对比就会发现调整后的效果相对来说比较友好，避免了整体页面的滑动，那么是怎样实现的呢？
1、打开 ry-ui.js 文件，在文件开头处有一个 table 对象，在对象中加入以下两个方法

    //重置表格视图
	resetTableView:function (){
		table.resetTableHeight();
	},
    //重置表格高度
	resetTableHeight:function (){
    	//获取页面高度
    	var heights=window.innerHeight;
    	//获取界面某个标签的高度
    	var tableHeight = heights-120;
    	if($(".clearfix").height() && $(".clearfix").css("display")!='none'){
    		var clearHeight=$(".clearfix").height();
    		tableHeight=tableHeight-clearHeight
    	}else{
    		tableHeight=tableHeight-36;
    	}
    	if($(".search-collapse").height() && $(".search-collapse").css("display")!='none'){
    		tableHeight=tableHeight-$(".search-collapse").height();
    	}else{
    		tableHeight=tableHeight+28;
    	}
    	if($(".fixed-table-pagination").css("display")=='none'){
    		tableHeight=tableHeight+90;
    	}
    	//这里主要是针对不同分辨率电脑动态动态改变表格高度
    	var tableObj=$('#bootstrap-table');
    	if(tableObj[0]){
    		//tableObj.bootstrapTable('resetView',{height:1000});
    		tableObj.bootstrapTable('resetView',{height:tableHeight});
    	}
    	var treeTableObj=$('#bootstrap-tree-table');
    	if(treeTableObj[0]){
    		treeTableObj.bootstrapTreeTable('resetView',{height:tableHeight});
    	} 
	}

2、接着在 ry-ui.js 文件 中找到 $.extend({}) 类似的对象，然后拉到这个对象的最后面，并在其后面加上以下代码，这样就可以在手动调整浏览器的大小时，自动适配高度

   //表格高度自适应
    $(window).resize(function () {
    	table.resetTableView();
     });

3、还是在 ry-ui.js 文件中，找到bootstrapTable 的加载成功方法 onLoadSuccess，并在方法内加上以下代码：

//表格自适应高度
table.resetTableHeight();

4、找到 static/ajax/libs/bootstrap-table/bootstrap-table.min.js，并搜索字样 key: “toggleShowSearch”，在 value: function() 中加入以下 setTimeout(function(){table.resetTableHeight(); },500) ，这样在点击收起或展开搜索框时就可自动调整表格高度

{
            key: "toggleShowSearch",
            value: function() {
                this.$el.parents(".select-table").siblings().slideToggle();
               //表格自适应高度
        		setTimeout(function(){table.resetTableHeight(); },500);
            }
        }

然后就可以了

总结

以上为我在基于若依框架开发时，对前端的一些改造或者小优化，后续有新的，我也会陆续加入进去
如有问题，欢迎评论交流哟