2013-02-25 36 views
6

मैं वर्तमान में मुसीबत पूरे jstree ताज़ा हो रही है; प्रारंभिक पेड़ लोड हो रहा है ठीक है और ताज़ा बच्चे नोड्स काम करता है भी अपेक्षा के अनुरूप काम करता है, लेकिन अगर रूट नोड में डेटा परिवर्तन पेड़ ताज़ा नहीं है यहां तक ​​कि डेटा बदल गया है और सर्वर के लिए फोन किया था।jstree ASP.NET MVC का उपयोग कर ताज़ा नहीं है 4

मैं 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); 

मुझे आशा है कि किसी को इस के साथ मेरी मदद कर सकते ताज़ा करना चाहिए स्टेशन स्तर के तहत बाल नोड्स ताज़ा करता है क्योंकि यह मुझे पागल कर रहा है।

चीयर्स

+0

एक तरीके के रूप में सभी इस मदद करता है? http://stackoverflow.com/questions/3682045/how-can-i-refresh-the-contents-of-a-jstree –

+0

दुर्भाग्य से नहीं, tree.jstree ("ताज़ा"); यहां दिया गया उदाहरण पेड़ के बराबर है। ताज़ा करें(); मैंने कोशिश की है। हालांकि प्रतिक्रिया के लिए धन्यवाद। – Troublesum

उत्तर

0

आप एक partialview अंदर पेड़ जगह, माता पिता आंशिक पर एक div बना सकते हैं और कि 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> 
+1

लेकिन यह पेड़ की स्थिति खो देगा, यानी नोड्स का विस्तार किया जाता है। – Troublesum