JStree异步搜索

Whe正忙于构建基于Web的应用程序。我们继承了前面的开发人员使用jstree的代码，所以现在整个站点都由使用jstree的树组成。JStree异步搜索

即使在树上进行搜索，一切都可以正常工作，但后来我们遇到了一个问题，某些选项卡由于树太大而加载时间过长。

所以我们去了，并做了异步/惰性加载，它完美的工作，但知道问题是，搜索不能很好地工作。

因为我们为可以工作的搜索做了一个api，但是在新的树被加载后它没有做回调。

有人可以帮助，因为我一直在挣扎3天，它给我一个头疼。

// Tree Search 
searchAjaxFunction: function() { 

     var TreeCustomApiRequest = { 
      nTreeCustomDesc: document.getElementById("tree_search").value, 
      nUserId: document.getElementById("TrendUserID").value, 
      nAccessLevel: document.getElementById("hfTrendAccessLevel").value 
     } 
      $.ajax({ 
      type: "POST", 
      data: JSON.stringify(TreeCustomApiRequest), 
      url: 'api/TreeCustomSearch.aspx', 
      success: function (jsonData) 
      { 
       Tree.dataJson = jsonData; 

       // Clear the tree. 
       //Tree.dataJson = jsonData; 
       if ($("#tree").jstree()) { 
        $('#tree').jstree(true).settings.core.data = jsonData; 
        $('#tree').jstree(true).deselect_node(this); 
        $('#tree').jstree(true).toggle_node(this); 
        $('#tree').jstree(true).refresh(); 
       } 
      }, 
      contentType: "application/json" 
     }); 
}, 

onClickFunctionNode: function(node) { 
    Tree.treeDivIdSelector.jstree(true).toggle_node(node); 
}, 
pluginsArray: ["search", "checkbox", "types", "json_data","html_data"], 
treeMenuContextItems: {}, 
Init: function(initData) { 
    Tree.dataJson = initData.dataJson; 
    Tree.treeDivIdSelector = initData.chartDivId; 
    Tree.searchDivIdSelector = initData.searchDivId; 
    var apiUriTree = 'api/TreeCustomChildren.aspx'; 
    Tree.treeDivIdSelector.jstree({ 
     "checkbox": { 
      "keep_selected_style": true, 
      "three_state": false 
     }, 
     "plugins": Tree.pluginsArray, 
     'core': { 
      'data': function (node, cb) { 
       // Fetch tree custom parent nodes 
       if (node.id === "#") { 
        cb(Tree.dataJson); 

       } 
       else { 
        var _cb = cb; 
        //Fetch tree custom Child nodes 


        var TreeCustomApiRequest = { 
         nUserId: document.getElementById("TrendUserID").value, 
         nAccessLevel: document.getElementById("hfTrendAccessLevel").value, 
         nTreeCustomParentId: node.id 
        } 
        function recieveData(data) { 
         cb(data); 
        } 

        $.ajax({ 
         type: "POST", 
         data: JSON.stringify(TreeCustomApiRequest), 
         url: apiUriTree, 
         success: recieveData, 
         contentType: "application/json" 
        }); 
       } 
      }, 
      "themes": { 
       "icons": false 
      } 
     },    


     "contextmenu": { 
      items: Tree.pluginsArray.indexOf("contextmenu") > -1 ? Tree.treeMenuContextItems : null 
     } 

    });   

    var tree = Tree.treeDivIdSelector.jstree(); 
    function getNode(sNodeID) { 
     return tree.get_node(sNodeID); 
    } 

    Tree.treeDivIdSelector.on('click', '.jstree-anchor', function(e) { 
     Tree.onClickFunctionNode(this); 
    } 
    ); 
    //Tree.searchDivIdSelector.keyup(Tree.searchFunction); 
},

下面的代码是在客户端......

<script type="text/javascript"> 
    $(document).ready(function() { 
     var dataJson = <%=sTreeViewJson%> 
     Tree.Init({ dataJson: dataJson, chartDivId: $("#tree") }); 

     $("#btnSearch").click(function() { 
      // Do the Ajax search 
      Tree.searchAjaxFunction(); 
      //var value = document.getElementById("tree_search").value; 
      //Tree.searchFunction(); 

    }) 
    }); 


</script>

来源

2015-11-20 WvdW

并预先感谢您的帮助...... – WvdW

您可以添加一个'complete：function（jqXHR，status）{...}'回调到您的AJAX以查看您从服务器获得的状态？因为你可能会得到一个错误，然后你的'成功'回调将不会被调用。 –

@NikolayErmakov我用警报（jqXHR.status）添加jqXHR和状态到我的ajax;并在我运行树后，我得到undefined回来。 – WvdW

谢谢尼古拉，这是从我一个愚蠢的错误所以我加入只是这对我的代码：

success: function (jsonData, callback) 
      { 
       //Goes back to the Callback with the new search data 
       Tree.Init({ dataJson: jsonData, chartDivId: $("#tree"), searchDivId: $("#tree_search") }); 
       $('#tree').jstree(true).refresh(); 
      }

所以我删除了

   $('#tree').jstree(true).settings.core.data = jsonData; 
       $('#tree').jstree(true).deselect_node(this); 
       $('#tree').jstree(true).toggle_node(this);

知道它获取我的数据，并在具有我的新数据时使用init函数刷新表。

希望这也可以帮助某人=）。

来源

2015-11-25 09:46:08 WvdW

JStree异步搜索

回答

相关问题