जेएसटी नोड विस्तार/संकुचित करें

Question

मैं आज सुबह उत्कृष्ट जेएसटीआई यूआईआई प्लग में भाग गया। एक शब्द में - बढ़िया! इसका उपयोग करना आसान है, & शैली में आसान है जो बॉक्स पर यह कहता है। एक चीज जिसे मैंने अभी तक समझने में सक्षम नहीं है यह है - मेरे ऐप में मैं यह सुनिश्चित करना चाहता हूं कि किसी भी समय केवल एक नोड का विस्तार किया जाए। यानी जब उपयोगकर्ता + बटन पर क्लिक करता है और नोड का विस्तार करता है, तो पहले से विस्तारित नोड को चुपचाप ढह जाना चाहिए। मुझे ओवरफ्लो पर एक बदसूरत स्क्रॉलबार बनाने और उपयोगकर्ता के लिए "पसंद अधिभार" से बचने के लिए कंटेनर div को एक लंबे पेड़ दृश्य के लिए रोकने के लिए इसे करने की आवश्यकता है।

मुझे कल्पना है कि ऐसा करने का कोई तरीका है लेकिन अच्छा लेकिन बदले में जेएसटी दस्तावेज ने मुझे ऐसा करने के सही तरीके की पहचान करने में मदद नहीं की है। मैं किसी भी मदद की सराहना करता हूं।

Answer 1

जेएसटी्री बहुत अच्छा है लेकिन इसका दस्तावेज बल्कि घना है। आखिर में मैंने इसे समझ लिया, इसलिए इस धागे में चलने वाले किसी के लिए समाधान यहां है।

सबसे पहले, आपको प्रश्न में पेड़ पर open_node ईवेंट को बांधना होगा।

$("tree").jstree({"themes":objTheme,"plugins":arrPlugins,"core":objCore}). 
bind("open_node.jstree",function(event,data){closeOld(data)}); 

यानी आप पेड़दृश्य उदाहरण को कॉन्फ़िगर करते हैं और फिर open_node ईवेंट को बाध्य करते हैं। यहां मैं क्लोज़ल्ड फ़ंक्शन को नौकरी करने के लिए बुला रहा हूं जो मुझे चाहिए - किसी अन्य नोड को बंद करें जो खुला हो सकता है। समारोह इतना

function closeOld(data) 
{ 
    var nn = data.rslt.obj; 
    var thisLvl = nn; 
    var levels = new Array(); 
    var iex = 0; 
    while (-1 != thisLvl) 
    { 
     levels.push(thisLvl); 
     thisLvl = data.inst._get_parent(thisLvl); 
     iex++; 
    } 

    if (0 < ignoreExp) 
    { 
     ignoreExp--; 
     return; 
    } 

    $("#divElements").jstree("close_all"); 
    ignoreExp = iex; 
    var len = levels.length - 1; 
    for (var i=len;i >=0;i--) $('#divElements').jstree('open_node',levels[i]); 
} 

यह सही ढंग से नोड है कि बस का विस्तार किया गया की नेस्टिंग स्तर पर ध्यान दिए बिना अन्य सभी नोड्स के तह संभाल लेंगे तरह चला जाता है।

कदम की एक संक्षिप्त विवरण शामिल

• पहले हम वापस treeview कदम जब तक हम एक शीर्ष स्तर नोड तक पहुँचने (-1 jstree बात में) यह सुनिश्चित करें कि हम हर पूर्वज नोड प्रक्रिया में सामना करना पड़ा रिकॉर्ड बनाने सरणी स्तरों
• में अगला हम treeview
• में सभी नोड्स अब हम स्तरों सरणी में nodees के सभी फिर से विस्तार करने के लिए जा रहे हैं पतन। ऐसा करने के दौरान हम नहीं चाहते कि यह कोड फिर से निष्पादित हो। ऐसा होने से हम स्तरों
• अंत में वैश्विक ignoreEx नोड्स की संख्या के चर सेट है कि रोकने के लिए, हम स्तरों में नोड्स के माध्यम से कदम और ऊपर प्रत्येक उनमें से एक

Answer 2

का विस्तार जवाब बार-बार पेड़ का निर्माण करेगा। नीचे दिया गया कोड नोड और पतन को खोल देगा जो पहले ही खोला गया है और यह फिर से पेड़ का निर्माण नहीं करता है।

.bind("open_node.jstree",function(event,data){ 
     closeOld(data); 
     }); 

और closeOld समारोह में शामिल है:

function closeOld(data) 
{ 
    if($.inArray(data.node.id, myArray)==-1){ 
      myArray.push(data.node.id); 
      if(myArray.length!=1){ 
       var arr =data.node.id+","+data.node.parents; 
       var res = arr.split(","); 
       var parentArray = new Array(); 
       var len = myArray.length-1; 
       for (i = 0; i < res.length; i++) { 
        parentArray.push(res[i]); 
       } 
       for (var i=len;i >=0;i--){ 
        var index = $.inArray(myArray[i], parentArray); 
       if(index==-1){ 
        if(data.node.id!=myArray[i]){ 
        $('#jstree').jstree('close_node',myArray[i]); 
         delete myArray[i]; 
        } 
       } 
       } 
     } 
    } 

Answer 3

फिर भी एक और jstree 3.3.2 के लिए उदाहरण। यह underscore lib का उपयोग करता है, jquery या vanillla js के समाधान को अनुकूलित करने के लिए स्वतंत्र महसूस करें।

$(function() { 
    var tree = $('#tree'); 
    tree.on('before_open.jstree', function (e, data) { 
     var remained_ids = _.union(data.node.id, data.node.parents); 
     var $tree = $(this); 
     _.each(
       $tree 
        .jstree() 
        .get_json($tree, {flat: true}), 
       function (n) { 
        if (
         n.state.opened && 
         _.indexOf(remained_ids, n.id) == -1 
        ) { 
         grid.jstree('close_node', n.id); 
        } 
       } 
     ); 
    }); 
    tree.jstree(); 
}); 

Answer 4

मैं हासिल की है कि बस घटना "before_open" और करीब सभी नोड्स का उपयोग करके, मेरे पेड़ सिर्फ एक स्तर यद्यपि, यकीन नहीं अगर thats तुम क्या जरूरत थी।

$('#dtree').on('before_open.jstree', function(e, data){ 
    $("#dtree").jstree("close_all"); 
});