web-dev-qa-db-ja.com

jsTree：jstreeからすべてのノードを取得する方法は？

JsTreeに存在するすべてのノードを取得するにはどうすればよいですか？

私はxmlでjsTreeを構築しています

Root
     -----A
          -----A1
               -----A1.1
               -----A1.2
          -----A2
               -----`A2.1`
               -----A2.2

     -----B
          -----B1
          -----B2

     -----C
          -----C1
               -----C1.1
               -----C2.2

JsTreeに存在するすべてのノード（ID）の配列は次のとおりです

期待される出力：[ルート、A、A1、A1.1、A1.2、A2、A2.1、A2.2、B、B1、B2、C、C1、C1.1、C2.2]

javascriptjqueryjquery-pluginsjquery-selectorsjstree
12
StackOverFlow

例を挙げた解決策：）

var xmlString = $("#tree").jstree("get_xml");   
    var xmlDOM = $.parseXML(xmlString);

    var IDList =[];
var items = $(xmlDOM).find('root item');
$.each (items, function(key, val){
    IDList.Push($(val).attr('id'));
})

IDList.pop();

xmlString =

<root>  
        <item id="A" parent_id="0" state="close">  
            <content><name>Charles Madigen</name></content>                
        </item>
        <item id="A1" parent_id="A" state="close">  
            <content><name>Charles Madigen</name></content>                
        </item>
          .
          .
</root>

出力：ルート、A、A1、A1.1、A1.2、A2、A2.1、A2.2、B、B1、B2、C、C1、C1.1、C2.2

：）

6
StackOverFlow

から ドキュメント ：

.get_json ( node , li_attr , a_attr )

この関数は、JSONに変換されたツリーノードの配列を返します。

このドキュメント からの同じ関数に関する詳細情報：

この関数はツリー全体をトラバースし、JSONとしてエクスポートします。出力の形式については、データソースのセクションを参照してください。

最初の引数としてノードを指定すると、そのノードとその子のみがエクスポートに含まれます。それ以外の場合は、ツリー全体がエクスポートされます。

検索するだけで見つかります！ :)

13
montrealist

次の方法で、各ノード要素をトラバースし、そのIDを配列に入れることができます。

var idList = [];
var jsonNodes = $('#tree').jstree(true).get_json('#', { flat: true });
$.each(jsonNodes, function (i, val) {
    idList.Push($(val).attr('id'));
})
3
MDummy
var treeData = $('#MyTree').jstree(true).get_json('#', {flat:false})
// set flat:true to get all nodes in 1-level json
var jsonData = JSON.stringify(treeData );
1
M2E67

Get_xmlがjstree3で利用できなくなったので、同じことが必要で、以下の解決策を思いつきました。

function get_jstree_order(root_ul_selector, children) {
    var output = [];
    var _this = this;

    if (typeof children === 'undefined') {
        children = $(root_ul_selector).find('> li');
    }

    children.each(function() {
        if ($(this).find('ul').length > 0) {
            output.Push({
                id: $(this).attr('id'),
                children: get_jstree_order(root_ul_selector, $(this).find('ul > li'))
            });

            return;
        }

        output.Push({
            id: $(this).attr('id'),
            children: false
        })
    });

    return output;
}

console.log(get_jstree_order('#mytree > ul'));

出力（読みやすくするためにJSONに変換）：

[
  {
    "id": "1",
    "children": false
  },
  {
    "id": "2",
    "children": false
  },
  {
    "id": "5",
    "children": [
      {
        "id": "6",
        "children": false
      },
      {
        "id": "7",
        "children": false
      }
    ]
  },
  {
    "id": "8",
    "children": false
  },
  {
    "id": "9",
    "children": false
  },
  {
    "id": "10",
    "children": false
  },
  {
    "id": "11",
    "children": false
  }
]

必要に応じて変更します。必要なものを含めるためですが、私の目的は、サーバー側の処理のためにアイテムの正しい順序を取得することだけでした。

子IDが親から独立している場合は、遅延読み込みで問題ありません（たとえば、親の最初の子は常に1から始まります）

0
zanderwar