ブートストラップツリービューから現在のデータ（オブジェクト/ json）を取得

私はBootstrap-Treeviewを使用しています。チェックボックス付きのツリーが必要です。そして、私はボタンを押すとtreview形式ですべてのツリーをサーバーに送りたいと思う。しかし、私はツリービューから実際のデータを抽出する方法を理解できません。ページが読み込まれた後ブートストラップツリービューから現在のデータ（オブジェクト/ 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が呼び出されます。しかし、すべてのツリービューの実際の状態に関する情報はありません。私は、すべてのノードについて、その情報を必要とする：

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

出典

2016-08-25 cynepnaxa

のようなツリーのすべてのノードを取得するために、そのことはできません何のパブリックメソッドは、ツリー全体の.IEの現在の状態を与えるツリービューオブジェクトで提供されていないため、すべてのノード。

しかし、treeview.getCollapsed（）メソッドとtreeview.getExpanded（）メソッドの出力を1つのオブジェクトに組み合わせることによって間接的にそのデータを抽出することは可能です。

<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）を取得

答えて

関連する問題