jstree不刷新使用ASP.NET MVC 4

Question

我目前無法刷新整個jstree;初始樹加載正常工作，並且刷新子節點也按預期工作，但是如果數據在根節點中更改，即使數據已更改並調用服務器，樹也不會刷新。

我會嘗試解釋jstree的設置。

全局變量

var levelType; 

樹設置

$("#explorer").jstree({ 
     plugins: ["core", "ui", "themes", "json_data", "types"], 
     themes: { 
      theme: "default", 
      dots: false, 
      url: url = '@Url.Content("~/Content/jstree/default/style.css")' 
     }, 
      json_data: { 
       ajax: { 
        cache: false, 
        url: function (node) { 
         var nodeId = ""; 
         var url = ""; 
         if (node == -1) { 
          url = '@Url.Action("GetSites", "Site")'; 
        } else if ($(node).attr("rel") == "station") { 
         url = '@Url.Action("GetInspections", "Inspection")' + '/' + $(node).attr("id"); 
        } 
        return url; 
       }, 
       success: function (metaData, textStatus, jqXhr) { 

        if (levelType == null || levelType == undefined || levelType == "root") { 
         //The initial node that is hard coded and will never change 
         var sitesData = [{ attr: { rel: "root" }, state: "open", data: "Root Node", children: [] }]; 

         $(metaData).each(function() { 
          sitesData[0].children.push({ attr: { id: this.Id, rel: "station" }, state: "closed", data: this.Name }); 
         }); 
         return sitesData; 
        } 

        if (levelType == "station" || levelType == "inspection") { 
         var items = []; 
         $(metaData).each(function() { 
          items.push({ attr: { id: this.Id, rel: "inspection", "class": "jstree-leaf" }, state: "closed", data: this.Name }); 
         }); 

         return items; 
        } 

        return null; 
       } 
      } 
     }, 
      types: { 
       types: { 
        "station": { 
         "icon": { 
          "image": '@Url.Content("URL")' 
        } 
       }, 
       "inspection": { 
        "icon": { 
         "image": '@Url.Content("URL")' 
       } 
      }, 
       'loading': { 
        'icon': { 
         'image': '@Url.Content("URL")' 
       } 
      }, 
       'root': { 
        'icon': { 
         'image': '@Url.Content("URL")' 
       } 
      } 
      } 
     } 
}); 

樹節點打開事件

$("#explorer").bind("before.jstree", function (e, data) { 
    if (data.func === "open_node") { 
     levelType = $(data.args[0]).attr("rel"); 
    } 
}); 

這個調用工作和預期

var tree = jQuery.jstree._reference("#explorer"); 
    var currentNode = tree._get_node("#the node Id"); 
    var parent = tree._get_parent(currentNode); 

    // this returns "inspection" 
    levelType = $(currentNode).attr("rel"); 

    //the parent node is the station node 
    tree.refresh(parent); 

此調用不工作，但應該刷新整個樹

var tree = jQuery.jstree._reference("#explorer"); 
    var currentNode = tree._get_node("#the node id"); 
//set the level the tree should be refreshing its data for (this is to ensure that the tree view knows it is not at a root node). 
    var parent = tree._get_parent(currentNode); 
//this returns "root" 
    levelType = $(parent).attr("rel"); 
    tree.refresh(-1); 

我希望有人能幫助我這個刷新下站級子節點因爲它讓我發瘋。

乾杯

Answer 1

你可以放置樹partialview中，創建父部分股利和渲染該div裏面的樹局部視圖。

然後，當您調用刷新樹時，您可以改爲執行Json獲取renderAction，並用內容樹部分替換父partail的內容。在這樣做時，它將完全異步，您可以應用自定義動畫。

<div id="parent"> 
@Html.RenderPartial("tree") 
</div> 

<script> 
$(function)({ 
// this could be any event 
$('some id').click(function(){ 
//this could also be a post, we call the controller action and it returns the 
//partialview 
$.get("GetTree", function(data){ 
$('#parent').html(data); 
}); 
}); 
</script>