<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Giva Labs - mcDropdown jQuery Plug-in | Giva</title>
<script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./lib/jquery.mcdropdown.js"></script>
<script type="text/javascript" src="./lib/jquery.bgiframe.js"></script>
<link type="text/css" href="./css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<script type="text/javascript">
var zNodes=[
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
{id:22,pId:2,name:"B2"},
{id:23,pId:2,name:"B3"},
{id:3,pId:0,name:"C"},
{id:31,pId:3,name:"C1"},
{id:32,pId:3,name:"C2"},
{id:33,pId:3,name:"C3"},
{id:34,pId:31,name:"x"},
{id:35,pId:31,name:"y"},
{id:36,pId:31,name:"z"}
];
var firstst=true;
var firsted=true;
function treeMenu(a){
this.tree=a||[];
this.groups={};
};
treeMenu.prototype={
init:function(pid){
this.group();
return this.getDom(this.groups[pid]);
},
group:function(){
for(var i=0;i<this.tree.length;i++){
if(this.groups[this.tree[i].pId]){
this.groups[this.tree[i].pId].push(this.tree[i]);
}else{
this.groups[this.tree[i].pId]=[];
this.groups[this.tree[i].pId].push(this.tree[i]);
}
}
},
getDom:function(a){
if(!a){return ''}
if(firstst){
var html='\n<ul id="categorymenu" class="mcdropdown_menu">\n';
firstst=false;
}else{
var html='\n<ul>\n';
}
//var html='';
for(var i=0;i<a.length;i++){
html+='<li rel="'+a[i].id+'">'+a[i].name;
html+=this.getDom(this.groups[a[i].id]);
html+='</li>\n';
};
if(firsted){
html+='</ul>\n';
}else{
html+='';
}
return html;
}
};
$(document).ready(function (){
var html=new treeMenu(zNodes).init(0);
//alert(html+"12211221121");
// $("categorymenu").append(html);
$('#id1').append(html);
$("#category").mcDropdown("#categorymenu");
});
</script>
</head>
<body>
<h3 id="example">无限级分类(无限级数据字典)</h3>
<p>请选择数据字典:<br />
<input type="text" name="category" id="category" value="" />
</p>
<div id="id1"></div>
<br/><br/><br/><br/>
在原有的基础上进行二次修改,通过ajax请求,获取json数组,迭代json数组生成多层级的数据字典。当前例子中数据源为
模拟的json数据。当然该方法是支持无限级父子关系。修改之前的源码均来自网上,本人只是对当前做了整合和稍作修改。
<br/><br/><br/><br/>
</body>
</html>