zui树型菜单用法

最新推荐文章于 2021-12-29 11:58:00 发布

hsg77

最新推荐文章于 2021-12-29 11:58:00 发布

阅读量1.8k

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/hsg77/article/details/81191055

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

zui树型菜单用法

<nav id="menu" class="menu" data-ride="menu" style="width:300px;">
 <ul id="treeMenu" class="tree tree-menu" data-ride="tree" style="width:300px;overflow-y:auto;overflow-x: hidden">
 </ul>
</nav>

// 手动通过点击模拟高亮菜单项
    $('#treeMenu').on('click', 'a', function() {
        $('#treeMenu li.active').removeClass('active');        
        var Tthis=$(this);
        Tthis.closest('li').addClass('active');        
        //var current_li=Tthis.closest('li');
    });

function SearchTableName(searchKey)
{
    datafind_searchKey=searchKey;
    // api/features/tables 
    var t_dmp_url=webconfig.webapiurl_dmp;    
    var t_url =t_dmp_url+"/api/features/tables";
    //alert(t_url);
    $.ajax({
        url: t_url,
        async: false,
        cache: false,
        type: "POST",  
        dataType: "json",           
        success: fnSuccess,
        error: error
    });
};
var datafind_searchKey='';
function fnSuccess(result)
{
    var SeriesArray=[];
    var t_Series='';
    var t_code='';
    var t_name='';
    for(var index=0;index<result.length;index++)
    {
        t_Series=result[index].Series;
        t_name=result[index].Name;
        if(t_name && (datafind_searchKey=='' ||t_name.indexOf(datafind_searchKey)!=-1))
        {
            if($.ArrayContains(SeriesArray,t_Series)==false)
            {
                SeriesArray.push(t_Series);
            }
        }
    }
    //初始化树型导航菜单
    var treeMenu=$('#treeMenu');
    if(treeMenu && treeMenu[0])
    {
        var t_str='';
        for(var i=0;i<SeriesArray.length;i++)
        {
            t_str+='<li class="has-list" data-idx="'+(i+1)+'" id="node_'+(i+1)+'">';
            t_str+='<i class="list-toggle icon"></i>';
            var t_collapseStr='onClick="javascript:toggleTreeNode(\'node_'+(i+1)+'\');"';
            t_str+='<a id="node_a_'+(i+1)+'"  href="#" '+t_collapseStr+'><i class="icon icon-bars"></i>'+SeriesArray[i]+'</a>';
            t_str+='<ul data-idx="'+(i+1)+'">';
            var colIndex=0;
            for(var index=0;index<result.length;index++)
            {
                t_Series=result[index].Series;
                if(t_Series==SeriesArray[i])
                {
                    t_code=result[index].Code;
                    t_name=result[index].Name;

                    if(t_name && (datafind_searchKey=='' ||t_name.indexOf(datafind_searchKey)!=-1))
                    {
                        colIndex+=1;
                        //
                        t_value=result[index].Value;
                        t_imgStr=GetLayerIconUrl(t_value);
                        t_clickStr='onClick="javascript:SelectLayerEvent(\''+t_code+'\');"'; 
                        t_str+='<li data-idx="'+(i+1)+'"  data-id="'+(i+1)+'-'+colIndex+'"><a  id="table_'+t_code+'" value="'+t_code+'" '+t_clickStr+' >'+t_imgStr+t_name+'</a></li>';
                    }
                }
            }
            t_str+="</ul>"
            t_str+='</li>';        
        }
        treeMenu[0].innerHTML=t_str;
    }        
};
function toggleTreeNode(nodeID)
{
     //alert(nodeID);
     var liObj=$('#'+nodeID);
     var cName=liObj[0].className;
     if(cName.indexOf('open')!=-1)
     {
          liObj.removeClass('open');
     }
     else
     {
          liObj.addClass('open');
     }     
};