부트 스트랩 트리 뷰에서 현재 데이터 가져 오기 (개체/json)

Bootstrap-Treeview을 사용하고 있습니다. 체크 박스가있는 트리가 필요합니다. 그리고 버튼을 누르면 treview 형식으로 서버에 모든 트리를 보내려고합니다. 하지만 treeview에서 실제 데이터를 추출하는 방법을 이해할 수 없습니다. 부트 스트랩 트리 뷰에서 현재 데이터 가져 오기 (개체/json)

<html xmlns="http://www.w3.org/1999/html"> 
 
<head> 
 
    <link href="bootstrap-treeview.min.css" rel="stylesheet"> 
 
    <link href="bootstrap.min.css" rel="stylesheet"> 
 
    <script src="jquery.js"></script> 
 
    <script src="bootstrap-treeview.min.js"></script> 
 
    <script> 
 
     window.onload = function() { 
 
      var object = [ 
 
       { 
 
        text: "Parent 1", 
 
        nodes: [ 
 
         { 
 
          text: "Child 1", 
 
          nodes: [ 
 
           { 
 
            text: "Grandchild 1" 
 
           }, 
 
          ] 
 
         }, 
 
         { 
 
          text: "Child 2" 
 
         } 
 
        ] 
 
       }, 
 
       { 
 
        text: "Parent 2" 
 
       }, 
 
      ]; 
 

 
      $('#tree').treeview({ 
 
       data: object, 
 
       showCheckbox: true, 
 
      }) 
 
        .on('nodeSelected', function (event, data) { 
 
         console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data)); 
 
         console.log('object =' + JSON.stringify(object)); 
 
         console.log('tree =' + JSON.stringify($('#tree').data('treeview'))); 
 
         console.log('tree 2 =' + JSON.stringify($('#tree'))); 
 
         console.log('tree 3 =' + JSON.stringify($('#tree').treeview(true))); 
 
        }); 
 
     }; 
 
    </script> 
 

 
</head> 
 
<body> 
 
<div id="tree">twetwe</div> 
 
</body> 
 
</html>

어떤 항목을 클릭보다 내가 어떤 확인란을 선택하고 페이지를로드 한 후

, 그래서 CONSOLE.LOG가 호출됩니다. 그러나 모든 treeview의 실제 상태에 대한 정보는 없습니다. 공용 방법은 전체 트리 .IE의 현재 상태를 줄 것이라고 트 리뷰 개체를 볼 수 없기 때문에

{"text":"Child 2","nodeId":3,"parentId":0,"selectable":true,"state":{"checked":false,"disabled":false,"expanded":false,"selected":true}}

출처

2016-08-25 cynepnaxa

그것의 불가능과 같은 트리의 모든 노드를 얻을 : 나는 모든 노드에 대한 정보가 필요합니다 모든 노드.

그러나 treeview.getCollapsed() 및 treeview.getExpanded() 메서드의 출력을 단일 객체로 결합하여 간접적으로 데이터를 추출 할 수 있습니다.

<html xmlns="http://www.w3.org/1999/html"> 
<head> 
    <link href="bootstrap-treeview.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
    <script src="bootstrap-treeview.min.js"></script> 

    <script> 
     window.onload = function() { 
      var object = [ 
       {text: "Parent 1", 
         nodes: [{text: "Child 1", 
            nodes: [{text: "Grandchild 1"}] 
           }, 
           {text: "Child 2"} 
         ] 
       }, 
       {text: "Parent 2"} ]; 

      $('#tree').treeview({ 
       data: object, 
       showCheckbox: true, 
      }).on('nodeSelected', function (event, data) { 
        console.log(getAllNodes()); 
        console.log(JSON.stringify(getAllNodes())); 
        console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data)); 
       }); 
     }; 

     function getAllNodes(){ 
      var treeViewObject = $('#tree').data('treeview'), 
       allCollapsedNodes = treeViewObject.getCollapsed(), 
       allExpandedNodes = treeViewObject.getExpanded(), 
       allNodes = allCollapsedNodes.concat(allExpandedNodes); 

      return allNodes; 
     } 


    </script> 

</head> 
<body> 
<div id="tree">twetwe</div>`enter code here` 
</body> 
</html>

그러나 결과 개체는 데이터로 treeview에 제공된 입력 개체와 구조가 유사하지 않습니다. 결과 객체는 입력 객체와 비슷한 객체를 만들기 위해 다시 포맷 될 수 있습니다.

출처

2016-08-25 11:37:31 Praym

감사합니다. 그러나, 나는 체크 노드 만 필요하다는 것을 알았다. API에는 getChecked 메소드가 없지만 실제로는 존재합니다. var checked = $ ('# tree'). treeview ('getChecked') - 나를 위해 작동합니다. – cynepnaxa

도움이 되니 기쁩니다. $ ('# tree'). data ('treeview')를 사용하여 콘솔에서 'treeview'객체를보고 객체를 탐색하면 노출 된 모든 메소드를 볼 수 있습니다. – Praym

부트 스트랩 트리 뷰에서 현재 데이터 가져 오기 (개체/json)

답변

관련 문제