大数据报表菜单栏问题

一，业务场景
该项目是一个大数据报表系统，使用php的Yii框架结合smarty，主要的业务报表分为两种，一种是iframe嵌入的外链报表，还有项目自己的报表。
为了查看方便，项目增加了收藏和最近访问报表菜单栏，
收藏菜单栏：根据后端$collet返回的数据遍历生成二级菜单，并根据$menu_id，$url_tpl，$isWhiteTable控制class中是否添加open从而控制一级菜单栏的展开收起；通过$url_tpl中是否有“visual”控制箭头的朝向；通过$coll.id eq $id是否相等添加选中菜单高亮active

    
        收藏
    
    
    {/if $collect|@count neq 0 /}
    

        {/foreach from = $collect item= coll key=key/}
        


            {/$coll.name/}
        
        {//foreach/}
    
    {//if/}

最近访问菜单栏：由于最近访问菜单需要在点击时展开并实时获取，所以通过整个页面刷新从后端拿接口这种方式体验不好，不予采取，于是设计需求为点击最近访问列表菜单通过ajax调取接口异步获取最新数据动态渲染出菜单

       

        
            
            
            
            最近访问报表
        


 

动态生成菜单js代码

var flag = true;
$('#history').on('click',function(e){
var $this = $(this);
    if(flag && ($(".h-right").css('display') == 'block')){
    flag = false;
    //防止多次点击发请求
    setTimeout(() => {
        $.ajax({
            type: 'get',
            url: '/visual/gethistory',
            success: function(d){
                var data = d.data;
                var html = "";
                for(var i=0; i < data.length; i++){
                    html +="
"+data[i].name+"
";
                }
                $('.d_history').empty();
                $('.d_history').append(html);
                $('.d_history').show();
                $('.h-right').hide();
                $('.h-down').show();
                toolTip();
                flag = true; 
            },
            error:function(e){
                console.log("e",e)
            },
            dataType: 'json'
        });
    }, 500);
    }
    if(flag && ($(".h-down").css('display') == 'block')){
        $('.d_history').hide();
        $('.h-right').show();
        $('.h-down').hide();
    }
})  

这时候基本实现了功能，但是出现了一个问题，当收藏菜单下的报表和最近访问报表下是同一个报表时，他们浏览器中对应的url是相同的，导致当点击最近访问报表下的同一报表时，浏览器刷新，重新通过$url_tpl中是否有“visual”控制箭头的朝向；通过$coll.id eq $id是否相等添加选中菜单高亮active，这时就会锁定收藏菜单下的同一报表。

二，提出方案
所以点击时就需要对收藏菜单和最近访问历史下的报表做区分，每次点击不同菜单下的报表都要记录是收藏的还是最近访问的，有两种解决方案，一种是后端返回数据时给收藏或历史访问返回一个特殊字段，每次点击对应菜单下的报表要通过特殊字段做区分，但是需要后端同学配合，后端修改时间成本较大，另一种是在前端点击菜单报表时做标记，即要区分是收藏还是最近访问历史下的报表，还要记录点击的是哪个报表，页面刷新的时候需要根据上次点击的报表做选中高亮。
三，前端解决方案实践
1.点击最近访问列表做标记需要把标记，将标记加入a标签的href中
href中加一个参数history（带history的是最近访问列表，对收藏列表做区分）,class加一个记录报表id的类（为了页面刷新选中高亮li）

for(var i=0; i < data.length; i++){
   html +="
"+data[i].name+"
";
}

点击最近访问报表里的报表（等同于页面刷新）时执行以下js代码:
解决了最近访问报表的所有问题

//刷新时判断是否是最近访问列表里的报表
var urlS = window.location.search;
    var value = urlS.split('=')[1]
    if(urlS.indexOf('history') >= 0){
    $.ajax({
        type: 'get',
        url: '/visual/gethistory',
        success: function(d){
            var data = d.data;
            var html = "";                
            for(var i=0; i < data.length; i++){
                html +="
"+data[i].name+"
";
            }
            $('.d_history').empty();
            $('.d_history').append(html);
            $('.d_history').show();
            
            $('.history_'+value).attr({'style':'color:#FFFFFF !important'});
            toolTip();
        },
        error:function(e){
            console.log("e",e)
        },
        dataType: 'json'
    });
}

2.解决收藏列表展开收起及选中报表高亮问题
只需要在页面加载时获取到url中是否有history做判断，如果没有说明是收藏菜单栏下的报表，首先需要用php的方式获取url，然后用php语法做判断即可，主要是这句代码，
$smarty.server.REQUEST_URI|strpos:'history'，在控制展开收起和报表选中高亮的部分加入判断即可

    
        {/if $menu_id eq 0/}
            {/if $smarty.server.REQUEST_URI|strpos:'history' lte 1 /}
                
            {/else/}
                
            {//if/}
        {/else/}
            
        {//if/}
        
        收藏
    
    
    {/if $collect|@count neq 0  || $isCollectCustom|@count neq 0/}
        

            {/foreach from = $collect item= coll key=key/}
                

                    {/$coll.name/}
                
            {//foreach/}
        
    {//if/}