Jquery 菜单插件之 Superfish jQuery菜单

大家如果想了解"Superfish jQuery菜单"插件，可以查看我发布的一篇“关于JQuery 菜单插件”,这里已经告诉我们该jQuery菜单插件的相关优势和下载地址，在下载中包含基础的Demo，初始者可以依次入门。

接下来，我们进入我们开发重点：

第一步：首先，查看我们基于Superfish jQuery菜单插件实现的效果。

第二步：查看静态HTML源代码，是如何实现该功能的（我们这里只是分析Superfish jQuery菜单插件HTML构成样式）。

<ul class="sf-menu" id="example" style="line-height:10px;margin-left:8px;">
<li class="current" >
<a href="#">CEO办公室</a>
<ul>
<li>
<a href="#">财务部1</a>
<ul>
<li>
<a href="#">财务部门2</a>
<ul>
<li><a href="#">测试部门</a></li>

</ul>
</li>

       </ul>
</li>
<li>
<a href="#">测试部门一</a>

</li>
<li>
<a href="#">测试部门2</a>

</li>
<li>
<a href="#">测试部门五</a>

</li>

</ul>
</li>
</ul>

通过上面静态HTML数据信息，我们可以很容易看出：ul标签和li标签，构成我们今天学习的菜单控件（Superfish jQuery），如何引用Superfish jQuery菜单插件的相关样式和js,请朋友们参考自己下载的Demo案例。

第三步:要实现第三方jquery 菜单插件与自己开发的项目整合起来，重点是要查看后台是如何返回数据，前台又是如何处理？下面这幅截图是我负责的系统后台返回数据样式(已经经过格式化)。[
    {
        "id": "14efbeaab57308f49ce1c1a4244b4009",
        "name": "华星光电",
        "subNode": [
            {
                "id": "14efbedf53d206203ed19ea44b098e83",
                "name": "财务部1",
                "subNode": [
                    {
                        "id": "14efbee399cdba581fa197744ab9f984",
                        "name": "财务部2",
                        "subNode": [
                            {
                                "id": "14efbee6bf2c9b3b913a21f4cf1a03e4",
                                "name": "财务部3",
                                "subNode": [
                                    {
                                        "id": "14efbee9311ce09a33a824e4691aee92",
                                        "name": "财务部4",
                                        "subNode": []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "id": "14f63b0288a3237a8e5820944d9bf326",
                        "name": "测试部门",
                        "subNode": []
                    }
                ]
            },
            {
                "id": "14f63b3954c4f7d53c992c54edaaa1da",
                "name": "测试部门一",
                "subNode": []
            },
            {
                "id": "14f63b4eb78b5faf65a4df74996894ca",
                "name": "测试部门2",
                "subNode": []
            },
            {
                "id": "14f63b51db6b5f39ffa3df249939cf64",
                "name": "测试部门五",
                "subNode": []
            }
        ]
    },
    {
        "id": "14efbee6bf2c9b3b913a21f4cf1a03e4 ",
        "name": "财务部3",
        "subNode": [
            {
                "id": "14efbee9311ce09a33a824e4691aee92",
                "name": "财务部4",
                "subNode": []
            }
        ]
    }
]

第四步：我们已经拿到了后台数据，接下来就是本篇文章的学习重点：（javascript 函数迭代、javascript JSONArray 数据格式解析和javascript 拼接HTML）

函数迭代：

//获取部门相关信息
function getDepart(){
var url="${kmsContextPath}kms/multidoc/kms_multidoc_knowledge/kmsMultidocKnowledge.do?method=homeSearchDept";
$.get(url, function(data,state){
var jsonarray=eval(data);
for(var i=0;i<jsonarray.length;i++){
var jsonObject=jsonarray[i];
 
var html="";
html+="<ul class='sf-menu' style='line-height:10px;margin-left:8px;' id='"+jsonObject.id+"'>";
html+="<li class='current'>";
html+="<a href='#' οnclick='searchCase(\"org\",\""+jsonObject.id+"\",\""+jsonObject.name+"\")'>"+jsonObject.name+"</a>";

//判断当前部门是否存在子节点
var subNode=jsonObject.subNode;
if(subNode.length!=0){
html+="<ul>";
var content=getSubDepart(subNode);
html+=content;
html+="</ul>";
}
html+="</li>";
html+="</ul>";

$("#department").append(html);
$("#"+jsonObject.id+"").superfish({});
 

}  
});  
}
//部门数据迭代
function getSubDepart(jsonObject){
var content=""
var jsonArray=eval(jsonObject);
for(var i=0;i<jsonArray.length;i++){
var json=jsonArray[i];

content+="<li>";
content+="<a href='#' οnclick='searchCase(\"org\",\""+json.id+"\",\""+json.name+"\")'>"+json.name+"</a>";
//判断是否存在子节点
var subDepart=json.subNode;
if(subDepart.length!=0){
content+="<ul>";
var html= getSubDepart(subDepart);
content+=html;
content+="</ul>";
}
content+="</li>";
}
return content;
}

在页面初始化时，调用geDepart()函数即可。

今天文章就透露到这里，今天这篇文章讲解：第三方JQuery插件（Superfish jQuery）和javascript函数迭代。

其他的（1）、JSONArray数据解析、（2）javascript拼接HTML都只是简单讲解，如果有兴趣的码农，可以自己百度或Google，实在不行就看我接下来准备发表的文章。