大家如果想了解"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": []
}
]
}
]函数迭代：
//获取部门相关信息
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;
}
今天文章就透露到这里，今天这篇文章讲解：第三方JQuery插件（Superfish jQuery）和javascript函数迭代。
其他的（1）、JSONArray数据解析、（2）javascript拼接HTML都只是简单讲解，如果有兴趣的码农，可以自己百度或Google，实在不行就看我接下来准备发表的文章。