7

JSTreeとAjaxに奇妙な問題があります。

を使用してHTML（UL、LI、Aタグ付き）を生成するAjax/PHPリクエストを介してツリーを生成します...

$.ajax({
    url: 'ajaxTreeView.php?method=edit&partid='+partId,
    cache: false,
    success: function(tree)
    {
        $('#treeViewer').html(tree);
    }});

を使用してコードでJStreeをアクティブ化します...

options = 
{
    "core": { animation: 120 },
    "themes": { theme: 'corral', dots: true },
    "types": 
    { 
        "types": 
        { 
            "parent": { "icon": { "image": "images/custom/Legend/node_select.png" } },
            "child": { "icon": { "image": "images/custom/Legend/node_select_child.png" } },
            "current": { "icon": { "image": "images/custom/Legend/node.png" } }
        }
    },
    "plugins": [ "html_data", "types", "themes", "ui", "contextmenu", "cookies" ],
    "ui": { "select_limit" : 1 },
    "cookies": { "save_selected" : false }
};

$("#tree").jstree(options);

ノードを簡単に選択できないようです。initial_selectを試しましたが、これは機能しないようで、プログラムでノードを選択したいことが多いため、理想的でもありません。

使ってみました...

$('#tree').jstree("select_node", '#ref565', true);

これは、ハイパーリンクを介して関数を呼び出すと機能しますが、JStreeを初期化した後に呼び出すと機能しません。

アラートを追加するとわかります（これはすべてAjax Successルーチンで発生します）...

$('#treeViewer').html(tree);
$("#tree").jstree(options);
alert('test');
$('#tree').jstree("select_node", '#ref565', true);

...アラートが開始する前にツリーがレンダリングされていないこと。

setTimeOutを追加しました...

$('#treeViewer').html(tree);
$("#tree").jstree(options);
setTimeout(function() {selectNode(565);},1250);
$('#tree').jstree("select_node", '#ref565', true);

...これは機能します。

私は明らかに愚かです。間違った構文を使用していますか？ノードを選択するために遅延を設定する必要があるのはなぜですか？

助けてください。

4

1 に答える 1

10

ツリーのロード後に最初に特定のノードを選択する場合は、 uiプラグインのinitially_selectオプションを使用することになっています。試してみたとのことですが、投稿したサンプルコードでは使用されていません。正しいIDを提供していますか？

プログラムでノードを選択するには、選択するノードが最初にDOMに表示されるのを待つ必要があります。loaded.jstreeタイムアウトコールバックを使用するよりも、ツリーの読み込みが完了し、すべてのツリー要素がDOMにある後に呼び出されるイベントにバインドして、そこでプログラムによる選択を行う方が正しいと思います。

使用法を示すサンプルコード：

$(function () {

    $("#tree")
        .jstree({ 
            // List of active plugins
            "plugins" : [ 
                "ui"
            ],

            // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
            // the UI plugin - it handles selecting/deselecting/hovering nodes
            "ui" : {
                // this makes the node with ID node_4 selected onload
                "initially_select" : [ "#ref565" ]
            },
            // the core plugin - not many options here
            "core" : { 
                // just open those two nodes up
                // as this is an AJAX enabled tree, both will be downloaded from the server
                "initially_open" : [ "#ref565" ] 
            }
        })
        .bind("loaded.jstree", function (e, data) {
                  $('#tree').jstree("select_node", '#ref565', true); 
        }) 
});
于 2012-10-10T18:25:59.887 に答える