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

【问题标题】：How to build a tree control with JSON and jQuery如何使用 JSON 和 jQuery 构建树形控件
【发布时间】：2010-10-12 20:30:13
【问题描述】：

我有一个网页，我想在 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>

【问题讨论】：

标签： javascript jquery ajax json

【解决方案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>

【讨论】：

【解决方案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");
    }
  });
});

这应该适用于任意数量的级别。

【讨论】：