jsTree: jQuery के साथ इंटरैक्टिव ट्री स्ट्रक्चर बनाएं

jsTree API क्या है?

jsTree जटिल JSON डेटा को इंटरैक्टिव, हायरार्किकल ट्री स्ट्रक्चर में बदलता है, जो डेवलपर्स को नेस्टेड JSON ऑब्जेक्ट्स को विज़ुअलाइज़ और नेविगेट करने का शक्तिशाली तरीका प्रदान करता है। jQuery प्लगइन के रूप में, यह कच्चे JSON को एक्सपैंड/कोलैप्स नोड ट्री में परिवर्तित करता है - API प्रतिक्रियाओं, कॉन्फिगरेशन फाइलों या किसी भी हायरार्किकल डेटासेट का निरीक्षण करने के लिए आदर्श।

JSON विज़ुअलाइज़ेशन के लिए प्रमुख सुविधाएँ:

• JSON-से-ट्री रूपांतरण: JSON ऐरे/ऑब्जेक्ट्स को स्वचालित रूप से पैरेंट/चाइल्ड नोड्स के रूप में रेंडर करता है
• इंटरैक्टिव एक्सप्लोरेशन: गहरे JSON स्ट्रक्चर में ड्रिल डाउन करने के लिए नोड्स को एक्सपैंड/कोलैप्स करें
• डायनामिक लोडिंग: बड़े JSON डेटासेट को लेज़ी-लोड करके परफॉरमेंस ऑप्टिमाइज़ करें
• कस्टम नोड रेंडरिंग: JSON डेटा टाइप्स (ऐरे, ऑब्जेक्ट्स, वैल्यू) के आधार पर नोड्स को स्टाइल करें
• खोज और फ़िल्टर: जटिल JSON ट्री में तुरंत की/वैल्यू ढूंढें

फ्लैट JSON व्यूअर्स के विपरीत, jsTree आपके डेटा में हायरार्की और रिलेशनशिप को बनाए रखता है, जो API डिबगिंग या नेस्टेड JSON स्कीमा डॉक्यूमेंटेशन के लिए आदर्श है।

गिटहब आँकड़े

नाम:
भाषा:
सितारे:
कांटे:
लाइसेंस:
रिपॉजिटरी को अंतिम बार अद्यतन किया गया था

jsTree क्यों चुनें?

• प्रमाणित समाधान: 10+ वर्षों का सक्रिय विकास
• हल्का-फुल्का: केवल jQuery को डिपेंडेंसी के रूप में आवश्यकता
• सुलभ: WCAG 2.0 अनुपालन
• विस्तृत प्रलेखन: संपूर्ण API संदर्भ
• MIT लाइसेंस: वाणिज्यिक उपयोग के लिए निःशुल्क

स्थापना

jsTree को पैकेज मैनेजर्स के माध्यम से इंस्टॉल किया जा सकता है या सीधे CDN से शामिल किया जा सकता है।

npm install jstree

नोट: jsTree से पहले jQuery को शामिल करना न भूलें।

कोड उदाहरण

इन उदाहरणों के साथ jsTree की क्षमताओं का अन्वेषण करें:

उदाहरण 1: HTML से बेसिक ट्री

jsTree बनाने का सबसे सरल तरीका नेस्टेड HTML सूचियों को परिवर्तित करना है। यह दृष्टिकोण तब आदर्श होता है जब आपका ट्री स्ट्रक्चर स्थिर हो या जब आप प्रोटोटाइपिंग कर रहे हों। प्लगइन स्वचालित रूप से नेस्टेड UL/LI स्ट्रक्चर को एक्सपैंड/कोलैप्स फंक्शनैलिटी के साथ इंटरैक्टिव ट्री में परिवर्तित करता है। बेसिक इम्प्लीमेंटेशन के लिए न्यूनतम JavaScript की आवश्यकता होती है और यह सरल नेविगेशन मेनू या कंटेंट स्ट्रक्चर के लिए अच्छी तरह से काम करता है।

प्रदर्शित सुविधाएँ:

• HTML से ट्री रूपांतरण
• एक्सपैंड/कोलैप्स फंक्शनैलिटी
• बेसिक थीमिंग

उदाहरण 2: JSON के माध्यम से डेटा लोड करना

डायनामिक एप्लिकेशन के लिए, jsTree JSON से डेटा लोड कर सकता है। यह दृष्टिकोण अधिक लचीला है और आपको प्रोग्रामेटिक रूप से ट्री स्ट्रक्चर बनाने की अनुमति देता है। JSON प्रारूप सीधा है, प्रत्येक नोड में "id", "text", "children", और "state" जैसे गुण होते हैं। आप प्रत्येक नोड के लिए आइकन, अक्षम स्थितियों और अन्य विशेषताओं को भी निर्दिष्ट कर सकते हैं। यह विधि विशेष रूप से उपयोगी है जब आपका ट्री डेटा डेटाबेस या API से आता है।

उदाहरण 3: चेकबॉक्स और ड्रैग एंड ड्रॉप

jsTree प्लगइन प्रदान करता है जो इसकी मूल कार्यक्षमता का विस्तार करते हैं। चेकबॉक्स प्लगइन प्रत्येक नोड में चयन योग्य चेकबॉक्स जोड़ता है, जबकि dnd प्लगइन ड्रैग-एंड-ड्रॉप ऑपरेशन सक्षम करता है। ये सुविधाएँ फाइल मैनेजर या अनुमति प्रणालियों जैसे इंटरफेस बनाने के लिए आवश्यक हैं जहाँ उपयोगकर्ताओं को कई आइटम चुनने या पदानुक्रम को पुनर्व्यवस्थित करने की आवश्यकता होती है। प्लगइन सैकड़ों नोड्स के साथ भी ट्री के प्रदर्शन को बनाए रखते हैं।

उन्नत सुविधाएँ

jsTree पेशेवर वर्कफ़्लो का समर्थन करता है:

• आलसी लोडिंग: मांग पर नोड्स लोड करें:

  आलसी लोडिंग

  
      $('#tree').jstree({
        'core': {
          'data': {
            'url': '/nodes/',
            'data': function (node) {
              return { 'id': node.id };
            }
          }
        }
      });
      
  

• इवेंट हैंडलिंग: ट्री इंटरैक्शन पर प्रतिक्रिया दें:

  इवेंट लिसनर्स

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('चयनित नोड्स:', data.selected);
      });
      
  

• कस्टम थीम: अपने ट्री को स्टाइल करें:

  कस्टम थीम

  
      $('#tree').jstree({
        'themes': {
          'name': 'custom',
          'dots': false,
          'icons': false
        }
      });
      
  

निष्कर्ष

jsTree हायरार्किकल डेटा विज़ुअलाइज़ेशन के लिए एक मजबूत समाधान प्रदान करता है। आदर्श:

• फाइल ब्राउज़र: डायरेक्टरी स्ट्रक्चर नेविगेट करें
• नेविगेशन मेनू: मल्टी-लेवल मेनू बनाएं
• CMS इंटरफेस: कंटेंट हायरार्की प्रबंधित करें
• कॉन्फिगरेशन टूल: नेस्टेड सेटिंग्स संपादित करें

अपने विस्तृत प्लगइन सिस्टम और सक्रिय रखरखाव के साथ, jsTree वेब एप्लिकेशन में ट्री स्ट्रक्चर के लिए पसंदीदा समाधान बना हुआ है।

इसी तरह के उत्पादों