Question

我正在开发一个包含2个ajax元素的应用程序。在页面的左侧，我使用JsTree进行导航，在右侧，我显示的搜索表单中包含与单击的Tree元素相关的数据表内容。当用户在右侧页面上搜索/过滤时，树中的相关节点应重新加载以显示过滤的内容。这类似于Windows文件资源管理器或Eclipse Explorer（具有同步）。

在“搜索”表单中单击“搜索”按钮时，树中当前选定的节点应重新加载：我可以使用set settings在jsTree中设置新的url。（警报显示新网址）。但是，当刷新节点时，使用在jsTree init期间指定的url刷新它。请帮我用新网址重新加载节点。（注意：我不能将绑定事件与树一起使用，因为执行的操作是在树外的按钮上。）

$('#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"]

}）

Answer 1

$('#treeElement').bind("select_node.jstree", function(e,data) {
    var obj = $("#treeElement").jstree("get_selected");
    var tree = jQuery.jstree._reference("#treeElement");
    tree.refresh(obj);
});

在JStree中使用新URL重新加载节点

1 个答案: