Question

我还是jquery和javascript整体的新手。

我正在尝试从可折叠的json解析器中获取所有条目，以便在网页加载时将其折叠。

我尝试摆弄第一个函数，但这似乎不起作用。

任何帮助将不胜感激。

这是JS代码：

/**
 * json-view - jQuery collapsible JSON plugin
 * @version v1.0.0
 * @link http://github.com/bazh/jquery.json-view
 * @license MIT
 */
;(function ($) {
    'use strict';

    var collapser = function(collapsed) {
        var item = $('<span />', {
            'class': 'collapser',
            on: {
                click: function() {
                    var $this = $(this);

                    $this.toggleClass('collapsed');
                    var block = $this.parent().children('.block');
                    var ul = block.children('ul');

                    if ($this.hasClass('collapsed')) {
                        ul.hide();
                        block.children('.dots, .comments').show();
                    } else {
                        ul.show();
                        block.children('.dots, .comments').hide();
                    }
                }
            }
        });

        if (collapsed) {
            item.addClass('collapsed');
        }

        return item;
    };

    var formatter = function(json, opts) {
        var options = $.extend({}, {
            nl2br: true
        }, opts);

        var htmlEncode = function(html) {
            if (!html.toString()) {
                return '';
            }

            return html.toString().replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        };

        var span = function(val, cls) {
            return $('<span />', {
                'class': cls,
                html: htmlEncode(val)
            });
        };        

        var genBlock = function(val, level) {
            switch($.type(val)) {
                case 'object':
                    if (!level) {
                        level = 0;
                    }

                    var output = $('<span />', {
                        'class': 'block'
                    });

                    var cnt = Object.keys(val).length;
                    if (!cnt) {
                        return output
                            .append(span('{', 'b'))
                            .append(' ')
                            .append(span('}', 'b'));
                    }

                    output.append(span('{', 'b'));

                    var items = $('<ul />', {
                        'class': 'obj collapsible level' + level
                    });

                    $.each(val, function(key, data) {
                        cnt--;
                        var item = $('<li />')
                            .append(span('"', 'q'))
                            .append(key)
                            .append(span('"', 'q'))
                            .append(': ')
                            .append(genBlock(data, level + 1));

                        if (['object', 'array'].indexOf($.type(data)) !== -1 && !$.isEmptyObject(data)) {
                            item.prepend(collapser());
                        }

                        if (cnt > 0) {
                            item.append(',');
                        }

                        items.append(item);
                    });

                    output.append(items);
                    output.append(span('...', 'dots'));
                    output.append(span('}', 'b'));
                    if (Object.keys(val).length === 1) {
                        output.append(span('// 1 item', 'comments'));
                    } else {
                        output.append(span('// ' + Object.keys(val).length + ' items', 'comments'));
                    }

                    return output;

                case 'array':
                    if (!level) {
                        level = 0;
                    }

                    cnt = val.length;

                    output = $('<span />', {
                        'class': 'block'
                    });

                    if (!cnt) {
                        return output
                            .append(span('[', 'b'))
                            .append(' ')
                            .append(span(']', 'b'));
                    }

                    output.append(span('[', 'b'));

                    items = $('<ul />', {
                        'class': 'obj collapsible level' + level
                    });

                    $.each(val, function(key, data) {
                        cnt--;
                        var item = $('<li />')
                            .append(genBlock(data, level + 1));

                        if (['object', 'array'].indexOf($.type(data)) !== -1 && !$.isEmptyObject(data)) {
                            item.prepend(collapser());
                        }

                        if (cnt > 0) {
                            item.append(',');
                        }

                        items.append(item);
                    });

                    output.append(items);
                    output.append(span('...', 'dots'));
                    output.append(span(']', 'b'));
                    if (val.length === 1) {
                        output.append(span('// 1 item', 'comments'));
                    } else {
                        output.append(span('// ' + val.length + ' items', 'comments'));
                    }

                    return output;

                case 'string':
                    val = htmlEncode(val);
                    if (/^(http|https|file):\/\/[^\s]+$/i.test(val)) {
                        return $('<span />')
                            .append(span('"', 'q'))
                            .append($('<a />', {
                                href: val,
                                text: val
                            }))
                            .append(span('"', 'q'));
                    }
                    if (options.nl2br) {
                        var pattern = /\n/g;
                        if (pattern.test(val)) {
                            val = (val + '').replace(pattern, '<br />');
                        }
                    }

                    var text = $('<span />', { 'class': 'str' })
                        .html(val);

                    return $('<span />')
                        .append(span('"', 'q'))
                        .append(text)
                        .append(span('"', 'q'));

                case 'number':
                    return span(val.toString(), 'num');

                case 'undefined':
                    return span('undefined', 'undef');

                case 'null':
                    return span('null', 'null');

                case 'boolean':
                    return span(val ? 'true' : 'false', 'bool');
            }
        };

        return genBlock(json);        
    };

    return $.fn.jsonView = function(json, options) {
        var $this = $(this);

        options = $.extend({}, {
            nl2br: true
        }, options);

        if (typeof json === 'string') {
            try {
                json = JSON.parse(json);
            } catch (err) {
            }
        }

        $this.append($('<div />', {
            class: 'json-view'
        }).append(formatter(json, options)));

        return $this;
    };

})(jQuery);

/**
 * json-view - jQuery collapsible JSON plugin
 * @version v1.0.0
 * @link http://github.com/bazh/jquery.json-view
 * @license MIT
 */


.json-view {
    position: relative;
}

.json-view .collapser {
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    left: -1.7em;
    top: -0.2em;
    z-index: 5;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.5;
    cursor: pointer;
}

.json-view .collapsed {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -khtml-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.json-view .bl {
    display: block;
    padding-left: 20px;
    margin-left: -20px;
    position: relative;    
}

.json-view {
    font-family: monospace;
}

.json-view ul {
    list-style-type: none;
    padding-left: 2em;
    border-left: 1px dotted;
    margin: 0.3em;
}

.json-view ul li {
    position: relative;
}

.json-view .dots,
.json-view .comments {
    display: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;     
    user-select: none;
}

.json-view .comments {
    padding-left: 0.8em;
    font-style: italic;
    color: #888;
}

.json-view .null,
.json-view .num,
.json-view .bool,
.json-view .undef {
    font-weight: bold;
    color: #1A01CC;
}

.json-view .str {
    color: #800;
}

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery JSON View demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="../dist/jquery.json-view.js"></script>
        <link href="../dist/jquery.json-view.css" rel="stylesheet">
    </head>
    <body>
        <div id="element"></div>
        <script>
            $(function() {
                $('#element').jsonView(JSON.stringify({
                    demo: 'string',
                    notSet: null,
                    zero: 0,
                    'true': true,
                    'false': false,
                    undef: undefined,
                    number: 5,
                    arr: [1, 2, 3, 'string', null, { a: 1 }, [2, 3, 4]],
                    obj: {
                        string: 'test string',
                        arr: [1, 2, 3, 4, 'myString', ['wow', [9,8,7,6]]],
                        obj1: {
                            hello: 'world',
                            nice: {
                                to: 'meet you',
                                'finally': [1, 2, 3, 4, 5]
                            }
                        }
                    }
                }));
            });
        </script>
    </body>
</html>

请确认这三个代码文件均已获得MIT许可。

Answer 1

每个<li>的跨度为类collapser，使用inspect元素，当您折叠节点时，它将在该元素中添加类collapsed。

因此从技术上讲，您可以尝试使用以下jQuery代码：

$(".collapser").addClass("collapsed");

加载JSON折叠器后。

jQuery，将所有json条目更改为折叠状态

1 个答案: