JSON 및 jQuery를 사용하여 트리 컨트롤을 작성하는 방법

jQuery를 사용하여 JSON 배열을 기반으로 트리를 동적으로 표시하려는 웹 페이지가 있습니다. 내 트리의 각 노드에는 이와 관련된 확인란이 있습니다. 자녀가있는 노드를 클릭하면 모든 노드를 확인하고 싶습니다. 나는 이미 트리와 체크 박스를 인쇄하는 일을 돌 봤고 이제는 아이들 노드를 선택하려고 노력하고 있습니다.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를 사용해야합니다. 이는 논리적 레벨을 정의하므로 CSS (코드를 사용할 수 있음)와 코드를 모두 지원합니다.

<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"클래스가 레벨을 정의

편집 코드는 같은 DOM을 생성합니다. 당신은 쉽게 이런 식으로 스타일을 지정할 수 있습니다 :

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

그런 다음이 같은 코드를 사용할 수 있습니다

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

이 어떤을 위해 일해야

이

<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 무엇을 단순화 것 레벨 수.

출처

2009-03-13 04:49:51 Seb

JSON 및 jQuery를 사용하여 트리 컨트롤을 작성하는 방법

답변

관련 문제