JQuery में पेड़ कैसे

अक्सर ऐसे कार्य होते हैं जिनमें आप किसी भी संस्था के रिश्तों की वृक्ष संरचना को प्रदर्शित करना चाहते हैं। उदाहरण के लिए, फ़ाइल सिस्टम, साइट मेनू या पाठ्यपुस्तक सामग्री पर नेविगेशन।

HTML में ट्री स्ट्रक्चर को प्रदर्शित करने का सबसे आसान विकल्प सूची है। लेकिन हम गतिशील गुणों वाले पेड़ों में रुचि रखते हैं। आप यहाँ जावास्क्रिप्ट के बिना नहीं कर सकते चूंकि समाधान आमतौर पर तेज़ है, jQuery का उपयोग करके आप गतिशील पेड़ों को बनाने की अनुमति देते हैं, जिससे कोडिंग समय की एक सभ्य राशि की बचत होती है। अपने आप को एक टन बचाने के लिए, खोज इंजन पर जाएं और एक उपयुक्त समाधान देखें। सामान्य तौर पर, किसी साइट पर एक पेड़ का निर्माण अक्सर केवल एक चीज है जो इसके लिए सीमित है, लेकिन ऐसी परिस्थितियां हैं जब पेड़ उपयुक्त है, लेकिन कुछ छोटी चिप नहीं है, और ऐसा करने के लिए कुछ भी नहीं बचा है लेकिन मौजूदा पेड़ को संशोधित करें।


आज, हमारे पास तैयारी की मेज पर दो पेड़ हैं: ट्रीव्यू और jQuery फ़ाइल ट्री ।

ट्रीव्यू के लिए, आपको पेड़ में नए नोड्स को सही ढंग से जोड़ने की आवश्यकता है। एक ओर, ऐसा लग सकता है कि कार्य अजीब है, क्योंकि पेड़ में चयनकर्ता के माध्यम से नए नोड्स जोड़ने की क्षमता है। इस तरह:

var tree = $( ".selector" ).treeview();
$( ".button" ).click( function () {
var newSublist = $( "<li><span class='folder'>New Sublist</span><ul>" +
"<li><span class='file'>Item1</span></li>" +
"<li><span class='file'>Item2</span></li></ul></li>" ).appendTo(tree);
tree.treeview({
add: newSublist
});
});



लेकिन इस दृष्टिकोण में एक खामी है, एक नोड या तो पेड़ के अंत में जोड़ा जा सकता है, या केवल एक कड़ाई से परिभाषित सबनोड में। लेकिन चयनित उप-साइट में एक नया नोड क्या जोड़ा जाएगा, यह स्पष्ट रूप से करना आसान नहीं है, क्योंकि सकारात्मक परिणाम की खोज, जो दस्तावेज़ में वर्णित से अलग है, नहीं किया।

इसलिए, हम पेड़ के व्यवहार में बाहरी हस्तक्षेप की विधि लागू करते हैं:

$( function () {
var pervios_node; //
$( "#browser" ).treeview({
toggle: function () { //
$( this ).addClass( "selector" ); //
// ( )
if (pervios_node!=undefined && pervios_node!= this ) {
//
$(pervios_node).removeClass( "selector" );
};
pervios_node= this ;
}
});
$( "#add" ).click( function () {
//
var branches = $( "<li><span class='folder'>New Sublist</span><ul><li><span class='file'>Item2</span></li></ul></li>" ).appendTo( "li.selector ul:first" );
$( "#browser" ).treeview({
add: branches
});
});
});



हस्तक्षेप का मुख्य बिंदु appendTo ("li.selector ul: first") है । हमने वर्तमान में चयनित नोड को चिह्नित करने के लिए चयनकर्ता वर्ग जोड़ा और अब हम इसे ढूंढ सकते हैं और नए नोड जोड़ सकते हैं।

दूसरा पेड़ फाइल सिस्टम की संरचना को प्रदर्शित करने के लिए है। लेकिन उसका एक छोटा दोष है। यदि आप कनेक्टर में फ़ाइल डिस्प्ले को अक्षम करते हैं, केवल निर्देशिकाओं को छोड़ दें, तो आप घोड़े के फ़ोल्डर की सामग्री को नहीं देख सकते हैं।

इस समस्या को हल करने के लिए, आपको मूल स्क्रिप्ट में मौजूद एक छोटी सी त्रुटि को ठीक करने के लिए, पेड़ को स्वयं बदलना होगा।

चलिए शुरू करते हैं। चलो jqueryFileTree.js ट्री स्क्रिप्ट पर चलते हैं और ट्री विकल्पों के लिए डिफ़ॉल्ट मान सेट करने के बाद, लाइन जोड़ें:

var show_root=1; //true


इटरेटर फ़ंक्शन के नीचे, हम लापता रूट पैरामीटर (अब कनेक्टर अनुपलब्ध चर पर शपथ नहीं लेंगे) को जोड़कर POST अनुरोध में मापदंडों के हस्तांतरण को ठीक कर देंगे, वर्तमान संस्करण में हम इस पैरामीटर को एक खाली स्ट्रिंग बनाते हैं, क्योंकि वह कनेक्टर में पथों के निर्माण में भाग लेता है। और अंत में, हम पेड़ के लिए रूट नोड के अतिरिक्त को विनियमित करने वाले पैरामीटर को जोड़ते हैं - शोच।

$.post(o.script, { dir: t, root: '' ,showroot:show_root }, function (data) {
…
});
show_root=0; //false


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

$_POST[ 'dir' ] = urldecode($_POST[ 'dir' ]);
$root= urldecode($_POST[ 'root' ]);
$show_root=( bool )urldecode($_POST[ 'showroot' ]);

if ( file_exists($root . $_POST[ 'dir' ]) ) {
$files = scandir($root . $_POST[ 'dir' ]);
natcasesort($files);
if ( count($files) > 2 ) { /* The 2 accounts for . and .. */
echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">" ;
//
if ($show_root)
{
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[ 'dir' ] . "." ) . "/\">root</a></li>" ;
}
else
{
// All dirs
foreach ( $files as $file ) {
if ( file_exists($root . $_POST[ 'dir' ] . $file) &&
$file != '.' &&
$file != '..' &&
is_dir($root . $_POST[ 'dir' ] . $file) ) {
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[ 'dir' ] . $file) . "/\">" . htmlentities($file) . "</a></li>" ;
}
}
// All files
}
echo "</ul>" ;
}
}



इस प्रकार, हमारे पास एक रूट डायरेक्टरी है, जिसमें से बाकी पहले से ही पेड़ के सबनॉड्स के रूप में दिखाई देते हैं।

युपीडी:

पेड़ों के साथ काम करने का डेमो यहां पाया जा सकता है ।