जेएसटी: एजेक्स के साथ प्रगतिशील_रेंडर/एक सरणी

Question

से नोड्स प्रस्तुत करना jsTree jQuery plugin के बारे में है। मैं थोड़ी देर के लिए इसके साथ संघर्ष कर रहा हूं, केवल यह समझने के लिए कि यह नहीं है (मूल रूप से) संभव है, इसलिए मैंने नीचे दी गई मेरी समस्या का समाधान (जो काम नहीं करता) के बारे में सोचा।

मेरे पास एक पेड़ है जो AJAX के साथ json_data प्लगइन का उपयोग करता है। एक बार जब आप खोलते हैं तो एक विशिष्ट नोड सर्वर से परिणाम 1000 से अधिक जेसन नोड्स की सरणी है। प्रतिक्रिया बहुत तेजी से है, लेकिन खुद प्रतिपादन लेता थोड़ी देर के (उपयोगकर्ता अनुभव है कि वह कष्टप्रद "स्क्रिप्ट नहीं जवाब - स्क्रिप्ट को रोक/जारी रखने के लिए" हो जाता है। संदेश

समाधान के बारे में मैं गया था भेजा परिणाम सीमित सोचा से सर्वर को एक छोटी संख्या (200 कहें) से और अगले 200 को लाने के लिए कुछ "अधिक दिखाएं" लेबल (या jQuery स्क्रॉल ईवेंट का उपयोग करके) का उपयोग करना। हालांकि, उन प्रत्येक नोड्स पर jstree.create का उपयोग करना बहुत धीमी होने के लिए मैंने फिर यह धागा on the jsTree google group देखा जिसमें इवान सुझाव देता है कि का उपयोग करके एक बार में सभी नोड्स बनाना संभव है। parse_json फ़ंक्शन - यह मेरे लिए काम नहीं करता है।

मैं क्या कर रहा हूँ का एक संक्षिप्त कोड स्निपेट: (जब "शो अधिक" लेबल पर क्लिक):

$.ajax({ 
    // send data to server in order to get the relevant json back 
    }(), 
    success : function (r) { 
      var parent_node = data.inst._get_parent(data.rslt.obj); 
      var id = parent_node.attr("id"); 
      $("#root_tree").jstree("_parse_json", r, parent_node); 
      $("#root_tree").jstree("clean_node", parent_node, false); 
      } 
    }); 

ऊपर के उदाहरण json प्रस्तुत नहीं होती, और करने के लिए बच्चों को कहते हैं पैरेंट नोड।

मैं किसी अन्य दृष्टिकोण की अत्यधिक सराहना करता हूं या यदि कोई इंगित कर सकता है कि मैं क्या गलत कर रहा हूं। फिर, का उपयोग करते हुए:

$.each(r, function(i, node) { 
     var id = parent_node.attr("id"); 
     $("#root_tree").jstree("create", "#"+id, "last", node, false, true); 
}); 

काम करता है, लेकिन बहुत बहुत धीरे धीरे (सभी 1000 नोड्स एक साथ प्रतिपादन की तुलना में धीमी)।

धन्यवाद

Answer 1

ठीक है, तो मेरे उपयोग थोड़ा बंद किया गया था।

क्या मैं ट्री दृश्य पर फ़ंक्शन को कॉल कर के बजाय घटना को सुन समाप्त हो गया:

var ref = parent_node.attr("id"); 
$.each(data, function(i, jsonNode) { 
     var node = inst._parse_json(jsonNode); 
     node.insertInside(ref); 
}); 

Answer 2

यह कैसे मैं अपने पेड़ की स्थापना की है और मैं अच्छी तरह से कुछ सौ नोड पर है और यह एक आकर्षण की तरह काम करता है। आईई 6/7 में मेरे पास बहुत ही मामूली प्रदर्शन मुद्दा था लेकिन हर जगह एक चैंप की तरह काम करता है।

$('#serverTree').bind("select_node.jstree", function (e, data) { 
     var url = data.rslt.obj.children("a:eq(0)").attr("href"); 
     if (url === "hasChild") { 
      data.inst.toggle_node(data.rslt.obj); 
     } 
     else { 
      //Do something when the leaf nodes are clicked 
     } 

    }).jstree({ 
     "themes": { "theme": "apple", "dots": false, "icons": false }, 
     "json_data": { 
      "ajax": { 
       "url": "/Home/GetNodes", 
       "data": function (n) { 
        return { id: n.attr ? n.attr("id") : 0 }; 
       } 
      } 
     }, 
     "plugins": ["themes", "json_data", "ui"] 
    }); 

यह कैसे मेरे JSON सर्वर से वापस आ रहा की तरह लग रहा है:

[{"data":{"title":"Node1","attr":{"id":null,"href":"hasChild"}}, 
"attr":{"id":"Node1","href":null},"state":"closed"}]