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

浏览数：75 / 时间：2015年06月09日

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