JQuery.Treeview ड्रॉपडाउन

प्रविष्टि

वर्तमान परियोजना के कार्यान्वयन के दौरान, मुझे ड्रॉप-डाउन पेड़ पसंद आया। चूंकि मैंने पहले ही jQuery के ट्री व्यू प्लगइन का उपयोग किया था, और इसकी कार्यक्षमता मुझे सूट करती है, इसलिए इसके आधार पर ड्रॉप-डाउन ट्री बनाने का निर्णय लिया गया। नतीजतन, DropDownTreeView प्लगइन जो मैं साझा करना चाहता हूं वह पैदा हुआ था।

कार्यात्मक

प्लगइन आपको AJAX लोड करने ( उदाहरण ) के साथ ड्रॉप-डाउन पेड़ बनाने की अनुमति देता है। ट्री बनाते समय, रैपर ऑब्जेक्ट में एक ट्री ओपन बटन जोड़ा जाता है, और ट्री को लोड किया जाता है। पेड़ पूरे या भागों में लोड किया जा सकता है (बड़े पेड़ों के लिए प्रासंगिक)। HTTP अनुरोधों को POST और GET विधियों द्वारा निष्पादित किया जा सकता है। HTTP अनुरोध पैरामीटर उपयोगकर्ता-परिभाषित हैं। पेड़ jQuery.Treeview का उपयोग कर बनाया गया है। जब आप किसी आइटम का चयन करते हैं और ट्री ज़ोन के बाहर क्लिक करते हैं तो पेड़ गिर जाता है।

विवरण के साथ उपयोग के उदाहरण

1. jQuery.Treeview और jQuery.Treeview.DropDown के लिए शैलियों को जोड़ें

< link href ='jquery.treeview.css' type ='text/css' rel ='stylesheet' >
< link href ='jquery.treeview.dropdown.css' type ='text/css' rel ='stylesheet' />

2. jQuery, jQuery.Treeview और jQuery.Treeview.DropDown स्क्रिप्ट जोड़ें

< script type ="text/javascript" >
$( function (){
$( '#dropdown' ).dropdowntreeview({},{'url':'test.php'});
}) //$(function()
</ script >


3. ड्रॉप-डाउन ट्री व्यू के कंटेनर के लिए HTML कोड जोड़ें।

< input type =' text ' id =' dropdown ' >

4. पेड़ लोडिंग

कॉल प्रारूप: $ (चयनकर्ता) .dropdowntreeview (परम, विकल्प, ट्री व्यूऑक्शन)
जहां:

1. परम - AJAX के उपयोग के अनुरोध के लिए JSON पैरामीटर
   
   उदाहरण: attr = {'my_id': 101, 'parent_id': 89} तब हमें "my_id = 101 & parent_id = 89" मापदंडों के साथ एक HTTP अनुरोध मिलता है।
   
   नोट: पैरामीटर नामों को टैग विशेषता नामों के साथ और अगले पैराग्राफ में वर्णित विकल्प नामों के साथ मेल नहीं खाना चाहिए।
   
   
2. विकल्प - JSON प्रारूप में सेटिंग्स
   संभव सेटिंग्स:
   टाइप - 'पोस्ट' या 'गेट' (डिफ़ॉल्ट 'पोस्ट' है)
   url - पेड़ के HTTP अनुरोध (शाखा) के लिए पता (वर्तमान पता डिफ़ॉल्ट रूप से है)
   चौड़ाई - चयन फ़ील्ड की चौड़ाई (डिफ़ॉल्ट रूप से, उस ऑब्जेक्ट की चौड़ाई, जिस पर पेड़ बंधा हुआ है)
   ऊंचाई - चयन क्षेत्र की ऊंचाई (सीएसएस में डिफ़ॉल्ट रूप से सेट)
   
   उदाहरण: विकल्प = {'url' = '/ tree.php', 'height' = ’४००px’}
   
   
3. ट्री व्यूओक्शन - ट्रीव्यू विकल्प (http://docs.jquery.com/Plugins/Treeview/treeview)

4.1। एक साधारण पेड़ लोड करने के लिए कोड।
4.1.1। POST विधि का उपयोग करके "test.php" पते से सबसे सरल पेड़ को लोड करने के लिए जावास्क्रिप्ट जोड़ें

< script type ="text/javascript" >
$( function (){
$( '#dropdown' ).dropdowntreeview({},{'url':'test.php'});
}) //$(function()
</ script >

नोट: पहला पैरामीटर इस तथ्य के कारण खाली छोड़ दिया गया था कि हमें अनुरोध का उपयोग करके किसी भी पैरामीटर को पारित करने की आवश्यकता नहीं है।


4.1.2। कोड परीक्षण।

<? php
//
? >
< ul class ="filetree" >
< li >< span class ="file" > 1 </ span ></ li >
< li >< span class ="folder" > 2 </ span >
< ul >
< li >< span class ="file" > 1 </ span ></ li >
< li >< span class ="file" > 2 </ span ></ li >

< li class ="closed" >< span class ="folder" > 3 </ span >
< ul >
< li >< span class ="file" > 1 </ span ></ li >
< li >< span class ="file" > 2 </ span ></ li >

< li >< span class ="file" > 3 </ span ></ li >
< li >< span class ="file" > 4 </ span ></ li >

</ ul >
</ li >
< li >< span class ="file" > 4 </ span ></ li >

</ ul >
</ li >
< li >< span > 3 </ span ></ li >


नोट: फ़ाइल सिस्टम आइकन प्रदर्शित करने के लिए बुलेटेड सूची में "फाइलट्री", "फ़ाइल", "फ़ोल्डर" को जोड़ा गया था।

4.2। भाग भरा हुआ वृक्ष
4.2.1। JavaScript कोड जोड़ें जो POST अनुरोध परीक्षण का उपयोग करके पेड़ का हिस्सा लोड करेगा। tp = Tid = 0

< script type ="text/javascript" >
$( function (){
$( '#dropdown' ).dropdowntreeview({'tid':'0'},{'url':'test.php'},{collapsed: true });
}) //$(function()
</ script >


नोट: पहला पैरामीटर अनुरोध द्वारा प्रेषित पैरामीटर है, दूसरा पैरामीटर अनुरोध के लिए पता है, तीसरा पैरामीटर ट्री व्यू विकल्प (ध्वस्त हो गया) विकल्प है ।

4.2.2। कोड परीक्षण। Php

<? php <br>// <br> $ x =$ _POST [ 'tid' ];<br> $ y =$ x + 1 ;<br> $ z =' < ul class ="temp" >< li class ="temp" ></ li ></ ul > ';<br>? > <br><br> < ul > <br> < li form ='portion' tid =' < ? php echo $ y ; ? > ' > <br> < span > 1- <? php echo $ x ; ? ></ span > <br> <? php echo $ z ; ? > <br> </ li > <br> < li form ='portion' tid =' < ? php echo $ y ; ? > ' > <br> < span > 2- <? php echo $ x ; ? ></ span > <br> <? php echo $ z ; ? > <br> </ li > <br> < li form ='portion' tid =' < ;? php echo $ y ; ? > ' > <br> < span > 3- <? php echo $ x ; ? ></ span > <br> </ li > <br> </ ul >

नोट: यदि टैग "li" में "ul" और "li" वर्ग "temp" टैग के रूप में वंशज हैं, तो इसे न्यूनतम सूची में प्रदर्शित किया जाएगा। जब इस सूची को वर्ग "अस्थायी" के साथ टैग के स्थान पर विस्तारित किया जाता है, तो माता-पिता के टैग "ली" के समान विशेषताओं से लिए गए मापदंडों के साथ सूची का एक नया भाग लोड किया जाएगा।

अर्थात्, पहली शाखा का विस्तार करते समय, POST अनुरोध परीक्षण द्वारा बनाई गई सूची। tp; Tid = 1 कक्षा 'अस्थायी' की सूची के स्थान पर गिर जाएगी; दूसरी शाखा का विस्तार होने पर, सूची POST अनुरोध परीक्षण द्वारा खोला जाएगा। tp = 2, आदि।

संदर्भ

Dropdowntreeview प्लगइन के उदाहरण और विवरण के साथ पृष्ठ।

एक उदाहरण के साथ प्लगइन डाउनलोड करें।

बस इतना ही। मुझे उम्मीद है कि मेरा प्लगइन किसी के लिए उपयोगी है। आपका ध्यान देने के लिए धन्यवाद।