jstree nie odświeża się przy użyciu środowiska ASP.NET MVC 4

Question

Aktualnie nie mogę odświeżyć całego jstree; początkowe ładowanie drzew działa dobrze i odświeżanie węzłów podrzędnych działa również zgodnie z oczekiwaniami, ale jeśli dane ulegną zmianie w głównym węźle, drzewo nie odświeża się nawet po zmianie danych i wywołaniu połączenia z serwerem.

Spróbuję wyjaśnić konfigurację jstree.

Globalna zmienna

var levelType; 

Drzewo Konfiguracja

$("#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")' 
       } 
      } 
      } 
     } 
}); 

Drzewo Node imprezą otwartą

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

toll działa i odświeża węzły dziecko poniżej poziomu stacji zgodnie z oczekiwaniami

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); 

To wywołanie nie działa, ale powinien odświeżyć całe drzewo

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); 

Mam nadzieję, że ktoś może mi w tym pomóc jak to doprowadza mnie do szału.

Cheers

Answer 1

Można umieścić drzewo wewnątrz PartialView utworzyć div na rodzica częściowego i renderowanie drzewa częściowego widoku wewnątrz tego div.

Następnie, gdy wykonasz połączenie, aby odświeżyć drzewo, możesz zamiast tego po prostu zrobić Json dostać się do renderAction i zastąpić zawartość nadrzędnego partail z części drzewa treści. W ten sposób będzie on całkowicie asynchroniczny i można zastosować niestandardowe animacje.

<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>