jQuery 把列表数据转成Json再输出为如下 dom树
<div id="menu" class="lv1">
<ul class="menu">
<li><a href="#" class="parent"><span>aaaaaaaaaaa</span></a>
<div class="lv2">
<ul>
<li><a href="#" class="parent"><span>bbbbbbbbbbbbbbbb</span></a>
<div class="lv3">
<ul>
<li><a href="#" class="parent"><span>cccccccc</span></a>
<div class="lv4">
<ul>
<li><a href="#"><span>ddddddddd</span></a></li>
<li><a href="#"><span>dddddddd</span></a></li>
<li><a href="#"><span>dddddddd</span></a></li>
<li><a href="#"><span>dddddddd</span></a></li>
<li><a href="#"><span>dddddddd</span></a></li>
<li><a href="#"><span>dddddddd</span></a></li>
</ul>
</div>
</li>
<li><a href="#"><span>ccccccccccccc</span></a></li>
<li><a href="#"><span>cccccccc</span></a></li>
<li><a href="#"><span>cccccccccc</span></a></li>
<li><a href="#"><span>cccccccccc</span></a></li>
<li><a href="#"><span>ccccccccc</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="parent"><span>bbbbbbbbbbbbbbbbb</span></a>
<div class="lv3">
<ul>
<li><a href="#"><span>cccccccccccc</span></a></li>
<li><a href="#"><span>cccccccccccc</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
列表字段分别为Title Level Parent Content, JQ代码如下
/**
* @create: nelson
* @initTree 初始化生成菜单
* @调用方式
$("#menu").initTree(qListview);
*/ $.fn.extend({
initTree: function (qListview) {
var This = $(this);
var That = $(qListview);
var keyArr = new Array();
var jsonArr = new Array();
That.find("thead th").each(function () {
keyArr.push($(this).text());
});
That.find("tbody tr").each(function (index) {
var jsonObj = {};
$(this).find("td").each(function (n) {
jsonObj[keyArr[n]] = $(this).html();
});
jsonArr.push(jsonObj);
});
This.attr('class', 'lv1').append('<ul class="menu"></ul>');
$.each(jsonArr, function (entryIndex, entry) {
switch (entry['Level']) {
case '1':
This.find("ul").append('<li><a href="#"><span>' + entry['Title'] + '</span></a></li>');
break;
case '2':
This.find(">ul>li>a").each(function () {
if (entry['Parent'] == $(this).text()) {
$(this).attr('class', 'parent');
if ($(this).parent().find('.lv2').html() == undefined) {
$(this).parent().append('<div class="lv2"><ul>' + '<li><a href="#"><span>' + entry['Title'] + '</span></a></li>' + '</ul></div>');
}
else {
$(this).parent().find('.lv2>ul').append('<li><a href="#"><span>' + entry['Title'] + '</span></a></li>');
}
return false;
}
});
break;
case '3':
This.find(".lv2>ul>li>a").each(function () {
if (entry['Parent'] == $(this).text()) {
$(this).attr('class', 'parent');
if ($(this).parent().find('.lv3').html() == undefined) {
$(this).parent().append('<div class="lv3"><ul>' + '<li><a href="#"><span>' + entry['Title'] + '</span></a></li>' + '</ul></div>');
}
else {
$(this).parent().find('.lv3>ul').append('<li><a href="#"><span>' + entry['Title'] + '</span></a></li>');
}
return false;
}
});
break;
case '4':
This.find(".lv3>ul>li>a").each(function () {
if (entry['Parent'] == $(this).text()) {
$(this).attr('class', 'parent');
if ($(this).parent().find('.lv4').html() == undefined) {
$(this).parent().append('<div class="lv4"><ul>' + '<li><a href="#"><span>' + entry['Title'] + '</span></a></li>' + '</ul></div>');
}
else {
$(this).parent().find('.lv4>ul').append('<li><a href="#"><span>' + entry['Title'] + '</span></a></li>');
}
return false;
}
});
break;
default:
break;
} });
return jsonArr;
}
});