jQuery操作列表数据转成Json再输出为html dom树

jQuery 把列表数据转成Json再输出为如下 dom树

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

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