首页 > 代码库 > jQuery操作列表数据转成Json再输出为html dom树

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

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

    <div id="menu" class="lv1">        <ul class="menu">            <li><a href="http://www.mamicode.com/#" class="parent"><span>aaaaaaaaaaa</span></a>                <div class="lv2">                    <ul>                        <li><a href="http://www.mamicode.com/#" class="parent"><span>bbbbbbbbbbbbbbbb</span></a>                            <div class="lv3">                                <ul>                                    <li><a href="http://www.mamicode.com/#" class="parent"><span>cccccccc</span></a>                                        <div class="lv4">                                            <ul>                                                <li><a href="http://www.mamicode.com/#"><span>ddddddddd</span></a></li>                                                <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li>                                                <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li>                                                <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li>                                                <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li>                                                <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li>                                            </ul>                                        </div>                                    </li>                                    <li><a href="http://www.mamicode.com/#"><span>ccccccccccccc</span></a></li>                                    <li><a href="http://www.mamicode.com/#"><span>cccccccc</span></a></li>                                    <li><a href="http://www.mamicode.com/#"><span>cccccccccc</span></a></li>                                    <li><a href="http://www.mamicode.com/#"><span>cccccccccc</span></a></li>                                    <li><a href="http://www.mamicode.com/#"><span>ccccccccc</span></a></li>                                </ul>                            </div>                        </li>                        <li><a href="http://www.mamicode.com/#" class="parent"><span>bbbbbbbbbbbbbbbbb</span></a>                            <div class="lv3">                                <ul>                                    <li><a href="http://www.mamicode.com/#"><span>cccccccccccc</span></a></li>                                    <li><a href="http://www.mamicode.com/#"><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="http://www.mamicode.com/#"><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="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘ + ‘</ul></div>‘);                            }                            else {                                $(this).parent().find(‘.lv2>ul‘).append(‘<li><a href="http://www.mamicode.com/#"><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="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘ + ‘</ul></div>‘);                            }                            else {                                $(this).parent().find(‘.lv3>ul‘).append(‘<li><a href="http://www.mamicode.com/#"><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="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘ + ‘</ul></div>‘);                            }                            else {                                $(this).parent().find(‘.lv4>ul‘).append(‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘);                            }                            return false;                        }                    });                    break;                default:                    break;            }        });        return jsonArr;    }});

 

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