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


    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;
        }
    });
  • 相关阅读:
    java堆
    本地方法栈
    java虚拟机栈
    Java 程序计数器
    面向对象 基本概念 复习
    if __name__=='__main__'
    偏函数与模块
    可变参数与关键字参数(复习材料)
    匿名函数
    闭包
  • 原文地址:https://www.cnblogs.com/fastmover/p/4121517.html
Copyright © 2020-2023  润新知