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

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

javascript jquery ajax json

Javascript 如何使用JSON和jQuery构建树控件,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我有一个网页，我想在jQuery的帮助下动态显示一个基于JSON数组的树。我的树的每个节点都有一个关联的复选框。当我单击一个有子节点的节点时，我希望所有子节点都被选中。我已经负责打印树和复选框，现在我正在尝试选择子节点，但我无法下面是到目前为止我已经完成的代码（简化）。有人知道我如何在使用jQuery选中复选框时自动选中子复选框吗谢谢 <html> <head> <script type="text/javascript" src="jquery-1.

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


var myJSON={
“d”：{
“_类型”：“分支机构”，
“名称”：“$”，
“完整路径”：“$\\$”，
“支行”：[
{
“_类型”：“分支机构”，
“名称”：“系统”，
“完整路径”：“$\\System”，
“支行”：[
{
“_类型”：“分支机构”，
“名称”：“图书馆”，
“完整路径”：“$\\System\\Library”，
“支行”：[
]
}, 
{
“_类型”：“分支机构”，
“名称”：“配置”，
“完整路径”：“$\\System\\Configuration”，
“支行”：[
{
“_类型”：“分支机构”，
“名称”：“重新成像”，
“完整路径”：“$\\System\\Configuration\\Reimage”，
“支行”：[
]
}, 
{
“_类型”：“分支机构”，
“名称”：“安装”，
“完整路径”：“$\\System\\Configuration\\Installation”，
“支行”：[
]
}
]
}, 
]
}
]
}
}
var输出；
var-indicationlevel=0；
函数GetSpacing（numberOfSpaces）{
var标签=“”；
对于（i=0；i

用空格区分标高不是一种好的做法。相反，您应该使用类或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>


.level1{左边距：0px；}
.level2{左边距：10px；}
.level3{左边距：20px；}
.level4{左边距：30px；}

然后您可以使用如下代码：

<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>


$（函数（）{
$（'div.level1 input'）。更改（函数（事件）{
如果（$（this）.is（“：checked”））{
$（this.parent（）.find（“input”）.attr（“checked”、“checked”）；
}
});
$（'div.level2 input'）。更改（函数（事件）{
如果（$（this）.is（“：checked”））{
$（this.parent（）.find（“.level3 input”）.attr（“选中”、“选中”）；
$（this.parent（）.find（“.level4输入”）.attr（“选中”、“选中”）；
}
});
$（'div.level3 input'）。更改（函数（事件）{
如果（$（this）.is（“：checked”））{
$（this.parent（）.find（“.level4输入”）.attr（“选中”、“选中”）；
}
});
});

用空格区分标高不是一种好的做法。相反，您应该使用类或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>


.level1{左边距：0px；}
.level2{左边距：10px；}
.level3{左边距：20px；}
.level4{左边距：30px；}

然后您可以使用如下代码：

<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>


$（函数（）{
$（'div.level1 input'）。更改（函数（事件）{
如果（$（this）.is（“：checked”））{
$（this.parent（））