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; } });