JSONとjQueryを使用してツリーコントロールを構築する方法

jQueryの助けを借りてJSON配列に基づいてツリーを動的に表示したいWebページがあります。ツリーの各ノードには、それに関連付けられたチェックボックスがあります。子供がいるノードをクリックすると、すべてのノードをチェックしたいと思います。私はすでにツリーとチェックボックスを印刷しています。私は今、子ノードを選択しようとしていますが、私はできません。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>

出典

2009-03-12 Martin

レベルをスペースで区切るのは良い方法ではありません。代わりに、クラスまたはIDを使用する必要があります。これは、論理レベルを定義するので、外観（コードを使用できる）とコードの両方に役立ちます。

編集そのような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>

出典

2009-03-12 08:05:22 kgiannakakis

私がやった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"); 
    } 
    }); 
});

これは任意のために働く必要がありますレベル数。

出典

2009-03-13 04:49:51 Seb

JSONとjQueryを使用してツリーコントロールを構築する方法

答えて

関連する問題