Question

我有一个网页，我希望在jQuery的帮助下动态显示基于JSON数组的树。我树的每个节点都有一个与之关联的复选框。当我点击一个有孩子的节点时，我想要检查所有这些节点。我已经处理了打印树和复选框的问题，现在我正在尝试选择子节点，但我无法做到。

以下是我到目前为止的代码（简化）。有没有人知道如何在使用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>

Answer 1

用空格区分等级不是一个好习惯。相反，你应该使用类或id。这有助于外观（可以使用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>

Answer 2

我简化了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");
    }
  });
});

这适用于任何级别。

如何使用JSON和jQuery构建树控件

2 个答案: