Как построить дерево управления с помощью JSON и JQuery - PullRequest
Новая
       15

Как построить дерево управления с помощью JSON и JQuery

1 голос
/ 12 марта 2009

У меня есть веб-страница, на которой я хотел бы динамически отображать дерево на основе массива JSON с помощью jQuery. Каждый узел моего дерева имеет флажок, связанный с ним. Когда я нажимаю на узел, у которого есть дочерние элементы, я хотел бы, чтобы все они были проверены. Я уже позаботился о печати дерева и флажков, и сейчас я пытаюсь выбрать дочерние узлы, и я не могу.

Ниже приведен код (упрощенный), который у меня есть. У кого-нибудь есть идеи, как я могу автоматически устанавливать флажки для детей, когда флажок установлен с помощью jQuery?

Спасибо! 

<html>
<head>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

        var myJSON = {
            "d": {
                "__type": "Branch", 
                "Name": "$", 
                "FullPath": "$\\$", 
                "SubBranch": [
                    {
                        "__type": "Branch", 
                        "Name": "System", 
                        "FullPath": "$\\System", 
                        "SubBranch": [
                            {
                                "__type": "Branch", 
                                "Name": "Library", 
                                "FullPath": "$\\System\\Library", 
                                "SubBranch": [
                                ]
                            }, 
                            {
                                "__type": "Branch", 
                                "Name": "Configuration", 
                                "FullPath": "$\\System\\Configuration", 
                                "SubBranch": [
                                    {
                                        "__type": "Branch", 
                                        "Name": "Reimage", 
                                        "FullPath": "$\\System\\Configuration\\Reimage", 
                                        "SubBranch": [
                                        ]
                                    }, 
                                    {
                                        "__type": "Branch", 
                                        "Name": "Installation", 
                                        "FullPath": "$\\System\\Configuration\\Installation", 
                                        "SubBranch": [
                                        ]
                                    }
                                ]
                            }, 
                        ]
                    }
                ]
            }
        }

        var output;
        var indentationLevel = 0;

        function GetSpacing(numberOfSpaces) {
            var tabs = '';
            for (i = 0; i < numberOfSpaces; i++) {
                tabs += '&nbsp;&nbsp;&nbsp;';
            }
            return tabs;
        }

        function GetHtmlForFeaturePath(featurePath) {
            return '<div>' + GetSpacing(indentationLevel) + '<input type="checkbox" id="' + featurePath.FullPath + '" class="featureTreeCheckbox" />' + featurePath.Name + "</div>";
        }

        function GetHtmlForFeaturePaths(node) {
            output += GetHtmlForFeaturePath(node);

            indentationLevel++;

            jQuery.each(node.SubBranch, function() {
                GetHtmlForFeaturePaths(this);
            });

            indentationLevel--;
        }


        String.prototype.startsWith = function(str) {
            return this.match("^" + str) == str;
        }


        window.onload = function() {
            GetHtmlForFeaturePaths(myJSON.d);
            document.writeln(output);

            /* How do I tell a node to check its children? */
            $('input').click(function(event) {
                var clickedControlId = this.id;
                alert(clickedControlId);  

                /* alert($.grep(myJSON.d, function (a) { return a.FullPath == clickedControlId })); */
            });
        }

    </script>

</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 13 марта 2009

Я бы упростил то, что сделал kgiannakakis: 

$(function() {
  $('div input:first').change(function(event) {
    if ($(this).is(":checked")) {
        $(this).next("div").find("input").attr("checked", "checked");
    } else {
        $(this).next("div").find("input").removeAttr("checked");
    }
  });
});

Это должно работать для любого количества уровней.

3 голосов
/ 12 марта 2009

Не рекомендуется разделять уровни пробелами. Вместо этого вы должны использовать класс или идентификатор. Это помогает как внешнему виду (вы можете использовать css), так и вашему коду, так как он определяет логические уровни.

Отредактируйте свой код, чтобы получить DOM, например: 

<div class="level1">
<input id="$\$" class="featureTreeCheckbox" type="checkbox">$
    <div class="level2">
    <input id="$\System" class="featureTreeCheckbox" type="checkbox">System
        <div class="level3">
            <input id="$\System\Library" class="featureTreeCheckbox" type="checkbox">Library
        </div>
        <div class="level3">
            <input id="$\System\Configuration" class="featureTreeCheckbox" type="checkbox">Configuration
                <div class="level4">
                    <input id="$\System\Configuration\Reimage" class="featureTreeCheckbox" type="checkbox">Reimage<br/>
                    <input id="$\System\Configuration\Installation" class="featureTreeCheckbox" type="checkbox">Installation
                </div>
        </div>
    </div>
</div>

Каждый класс "levelx" определяет уровень. Вы можете легко оформить это так: 

<style>
.level1 { margin-left: 0px; }
.level2 { margin-left: 10px; }
.level3 { margin-left: 20px; }
.level4 { margin-left: 30px; }
</style>

Тогда вы можете использовать код, подобный этому: 

<script type="text/javascript">

$(function() {
$('div.level1 input').change(function(event) {
    if ($(this).is(":checked")) {
        $(this).parent().find("input").attr("checked", "checked");
    }
});
$('div.level2 input').change(function(event) {
    if ($(this).is(":checked")) {
        $(this).parent().find(".level3 input").attr("checked", "checked");
        $(this).parent().find(".level4 input").attr("checked", "checked");
    }
});

$('div.level3 input').change(function(event) {
    if ($(this).is(":checked")) {
        $(this).parent().find(".level4 input").attr("checked", "checked");
    }
});

});
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...