Wie baue ich ein Baum-Steuerelement mit JSON und jQuery

Ich habe eine Webseite, auf der ich mit Hilfe von jQuery dynamisch eine Struktur basierend auf einem JSON-Array anzeigen möchte. Jedem Knoten in meinem Baum ist ein Kontrollkästchen zugeordnet. Wenn ich auf einen Knoten klicke, der Kinder enthält, möchte ich, dass alle überprüft werden. Ich habe schon darauf geachtet, den Baum und die Checkboxen auszudrucken und ich versuche nun Kinderknoten auszuwählen und ich kann nicht.Wie baue ich ein Baum-Steuerelement mit JSON und jQuery

Unten ist der Code (vereinfacht), den ich bisher habe. Hat jemand eine Idee, wie ich die Checkboxen für Kinder automatisch überprüfen könnte, wenn ein Kontrollkästchen mit jQuery aktiviert ist?

Danke!

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

Quelle

2009-03-12 Martin

Es ist keine gute Übung, Ebenen mit Leerzeichen zu unterscheiden. Stattdessen sollten Sie eine Klasse oder eine ID verwenden. Dies hilft sowohl der Darstellung (Sie können CSS verwenden) als auch Ihrem Code, da er logische Ebenen definiert.

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

Jede "LevelX" Klasse definiert eine Ebene:

bearbeiten Sie den Code ein DOM, so zu produzieren. Sie können es so leicht Stil:

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

Dann sind Sie folgenden Code verwenden können:

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

Quelle

2009-03-12 08:05:22 kgiannakakis

Ich würde vereinfachen, was kgiannakakis hat:

$(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"); 
    } 
    }); 
});

Dies sollte für jede Arbeit Anzahl der Ebenen.

Quelle

2009-03-13 04:49:51 Seb

Wie baue ich ein Baum-Steuerelement mit JSON und jQuery

Antwort

Verwandte Themen