2

2 つの ajax 要素を持つアプリケーションを開発しています。ページの左側では、ナビゲーションに JsTree を使用しています。右側では、クリックされた Tree 要素に関連するデータテーブル コンテンツを含む検索フォームを表示しています。ユーザーが右側のページで検索/フィルター処理を行うと、ツリー内の関連するノードがリロードされ、フィルター処理されたコンテンツが表示されます。これは、Windows ファイル エクスプローラーまたは Eclipse エクスプローラー (同期あり) に似ています。

検索フォームの検索ボタンをクリックすると、ツリーで現在選択されているノードがリロードされます。設定された設定を使用して、jsTree に新しい URL を設定できます。(アラートは新しい URL を示します)。ただし、ノードが更新されると、jsTree の初期化中に指定された URL を使用して更新されます。新しい URL でノードをリロードするのを手伝ってください。(注: 実行されるアクションはツリーの外側のボタン上にあるため、ツリーで bind イベントを使用することはできません。)

$('#searchbtn').live('click', function() {
var tree = jQuery.jstree._reference("#tree_container");
var currentNode = tree._get_node($(".jstree-clicked"), false);
settings = jQuery("#tree_container").jstree('get_settings');
settings.json_data.ajax.url = "<%= request.getContextPath() %>"/inventory/tree/getTree?search=abcd
jQuery("#tree_container").jstree('set_settings', settings); 
alert("new settings url: "+settings.json_data.ajax.url);
tree.refresh(currentNode);
});

$(function () {
    var tree = $("#tree_container")
        .jstree({ 
        "json_data" : {
            "ajax" : {
                "url" : "<%= request.getContextPath() %>/inventory/tree/getTree",
        "data": function (n) {
          return {
            "operation": "get_children",
            "id": n.attr ? n.attr("id").replace("node_", "") : 0,
            "elementType": n.attr ? n.attr("elementType") : "notdefined",
            "page": n.attr ? n.attr("page") : "nopage"
          };
    }
  }
},
"types": {
  "types": {
    "max_children": -2,
    "max_depth": -2
  }
},
"ui": {
  "initially_select": ["node_1"]
},
"core": {
  // just open those two nodes up   
  // as this is an AJAX enabled tree, both will be downloaded from the server
  "initially_open": ["node_1"]
},
"themes": {
  "theme": "classic",
  "dots" : true,
        "url" : "assets/css/tree/classic/style.css"
},
"plugins": ["themes", "json_data", "ui", "types", "hotkeys"]

}))

4

1 に答える 1

1 
$('#treeElement').bind("select_node.jstree", function(e,data) {
    var obj = $("#treeElement").jstree("get_selected");
    var tree = jQuery.jstree._reference("#treeElement");
    tree.refresh(obj);
});
于 2012-10-25T07:07:38.167 に答える