web-dev-qa-db-ja.com

jsTreeによる遅延読み込み

Jtreeのノードが展開されたときにそれらを動的にロードしようとしています。私が見つけた小さなドキュメントは このページ の最後にあります。

this one のようなループでノードを1つずつ作成するいくつかのソリューションを見つけました。私は試していませんが、ドキュメントページを見ると、jstreeがノードの循環を処理する必要があると感じています。

plugins: ["json_data"]を使用する多くのソリューションを見つけましたが、 プラグインのドキュメントページ はそのプラグインについてまったく触れていません。それはもう必要のない古いプラグインですか？

現在の実装では、このコードを使用してツリー全体を一度にロードします。

$.ajax({
    var pn = $('#project_number').val();
    url : "bomtree?part=" + pn,
    success : function(tree_content) {
        var data = $.parseJSON(tree_content);
        var config = {
            'core' : {
                'data' : data
            }
        };
        $('#bom_tree').jstree(config);
    }
});

ドキュメントページのコードを次のように変更しました。

$(function() {
    var pn = $('#project_number').val();
    $('#tree').jstree({
        'core' : {
            'data' : {
                'url' : function(node) {
                    return '/doc/test2';
                },
                'data' : function(node) {
                    return {
                        'part' : node.id === '#' ? pn : node.id
                    };
                }
            }
        }
    });
});

同じjsonテキストが最初のコードで機能し、2番目のコードでも機能します。ドキュメントにはThe format remains the same as the aboveと書かれているので、変更しませんでした。

例と同じデータを返すことも試みました、これ：

[
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]

しかし結果は同じです。jqueryは次の行でSizzle.errorをスローします。

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};

ここで、msgの内容は、サーバーから返されたjsonデータです。

どうしましたか？

jqueryajaxjsonjstree
15
stenci

「AJAXを使用する場合、子をブール値trueに設定すると、jsTreeはノードを閉じたものとしてレンダリングし、ユーザーがノードを開いたときにそのノードに対して追加のリクエストを行います。」 、これは jstree ドキュメントからのものであり、要件を満たすことができます。

11
Nathan

Nathansの回答を（非常に最小限の）例で拡張します：遅延読み込みによるデモツリー。

JS：

$('#the_tree').jstree({
    'core' : {
        'data' : {
            'url' : "tree/ajax.php", 
              'data' : function (node) {
                  return { 'id' : node.id };
              }
        }
    },

});

PHP：

header('Content-Type: application/json');

if ( $_GET["id"] === "#" ) { 
    $data = array(
            array( "id" => "ajson1", "parent" => "#", "text" => "Simple root node"  ),
            array( "id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true ),

    );
}

else if ( $_GET["id"] === "ajson2" ) {
    $data = array(
        array( "id" => "ajson3", "parent" => "ajson2", "text" => "Child 1" ),
        array( "id" => "ajson4", "parent" => "ajson2", "text" => "Child 2" )
    );
}

echo json_encode( $data);

"children" : trueを持つノードのみが開かれたときに子のリクエストを生成し、他のノードはリーフとして扱われます。

7
cytofu

ドキュメンテーション/例はかなり大まかなものです。また、混乱の原因がメジャーアップグレードにあることも付け加えておきます。 （古いバージョン は新しいバージョンとあまり共通点がなく、残念ながらほとんどの例は古いバージョンに対して作成されています。

良い知らせは、レイジーローディングはそのままでサポートされているということです。重要なのは、それがdata: config各ノードが展開されます。ただし、URL関数が機能するためには、指定されたノードに対して別のURLを返す必要があります。以下のコードでは、ノードがルート（#）、そうでない場合は別の。

$('#TreeDiv')
  .jstree({
    core: {
      data: {
        url: function (node) {
          return node.id === '#' ? '/UserAccount/AccountGroupPermissions' 
                                 : '/UserAccount/AccountPermissions/' + node.id;
        },
        type: 'POST'
      }
   },
   plugins : ["checkbox"]
});
7
b_levitt

遅延読み込みを行うには、childrenプロパティフィールドを持つツリーノードを持つJSONオブジェクトを返すバックエンドが必要です。 Childrenプロパティには、children要素またはブール値true（配列またはブール値）が含まれている必要があります。バックエンドで強く型付けされた言語を使用すると、醜くなります。フロントエンドで処理するのが最善です。 AJAX成功のコールバックの例：

$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : function(node) {
                return '/doc/test2';
            },
            'data' : function(node) {
                return {
                    'part' : node.id === '#' ? pn : node.id
                };
            },
            'success' : function(nodes) {

                var validateChildrenArray = function(node) {

                    if (!node.children || node.children.length === 0) {
                        node.children = true;
                    }
                    else {
                        for (var i = 0; i < node.children.length; i++) {
                            validateChildrenArray(node.children[i]);
                        }
                    }
                };

                for (var i = 0; i < nodes.length; i++) {
                    validateChildrenArray(nodes[i]);
                }
            }
        }
    }
});

これを行うことにより、ツリーを遅延ロードできるようになります。

4
André Bonna

「select_node.jstree」イベントと「create_node」メソッドを組み合わせて、カスタマイズされた遅延読み込みを行いました。すべてのノードを選択すると、イベントハンドラーは子があるかどうかを確認し、選択したノードにノードごとにサーバーの応答を追加します。私のサーバーの応答はjstreeの要件と似ていませんでした。この戦略により、多くの時間と労力を節約できました。それが誰かを助けることを願っています。

0
Alireza Ahmadi Rad