गतिशील रूप के लिए jQuery प्लगइन

मैं समुदाय को अपने स्वयं के प्लगइन के साथ साझा करना चाहता हूं, जो गतिशील रूपों के साथ काम करना सरल करता है और इसे jqDynaForm कहा जाता है। डायनेमिक रूपों से मेरा मतलब उन रूपों से है जिसमें उपयोगकर्ता को भरते समय आवश्यकतानुसार अतिरिक्त फ़ील्ड या फ़ील्ड ब्लॉक जोड़ सकते हैं। बेशक, प्रत्येक स्थान पर केवल पहले से अनुमत प्रकार के ब्लॉकों को जोड़ने की अनुमति है। ऐसे सरल रूपों के उदाहरण इस प्रकार हैं:

1. एक संपर्क फ़ॉर्म जिसमें एक "टेलीफोन" फ़ील्ड है। अगर इच्छा हो तो उपयोगकर्ता फ़ोन के लिए कुछ अतिरिक्त फ़ील्ड जोड़ सकते हैं।

2. भुगतान के लिए चालान। फ़ील्ड का एक निश्चित सेट है, जैसे "भुगतानकर्ता का नाम" और "खाता संख्या"। इसके अलावा, पदों के साथ एक तालिका है। प्रत्येक स्थिति में निम्नलिखित फ़ील्ड शामिल हैं: "नाम", "मात्रा", "मूल्य"। उपयोगकर्ता अतिरिक्त पदों की एक मनमानी संख्या जोड़ सकता है।

आइए ऐसे खाते के उदाहरण के साथ jqDynaForm के साथ काम करते हुए देखें। यहाँ इस रूप का एक उदाहरण है:





आइए HTML कोड को देखें जिसे प्लगइन के लिए तैयार करने की आवश्यकता है:

<!-- Base form --> <h1>Simple form demo</h1> <div id="smallForm"> <h2>Invoice</h2> <p>Number: <input name="number" size="6"> Payer: <input name="payer"></p> <h3>Products</h3> <div data-holder-for="product"></div> <p> </p> <input type="button" value="Save" id="saveSmallForm"> </div> <!-- Library of dynamic blocks. Here is only one block named "product" --> <div style="display:none"> <div data-name="product" data-label="Product" class="product"> <input name="title" style="width:600px"> Price: <input name="price" style="width:100px; text-align:right"> X <input name="amount" class="short" value="1" style="width:50px"> </div> </div> 

मैं इसे साफ करने के लिए अनावश्यक सब कुछ फेंक दूंगा:

 <!--  --> <div> …   … <div data-holder-for="<_>"></div> <input type="button" value="Save"> </div> <!--   --> <div data-name="_"> …     … </div> 

यानी हमारे पास खेतों के निश्चित सेट के साथ कुछ बुनियादी रूप हैं। इस फॉर्म के अंदर हम "डेटा-धारक-के लिए" विशेषता के साथ चिह्नित एक डीआईओ धारक को रखते हैं। विशेषता मान उस ब्लॉक का नाम निर्दिष्ट करता है जिसे यहां डाला जा सकता है। इस ब्लॉक के लिए HTML कोड फॉर्म से अलग-अलग सेट किया गया है और डेटा-नाम विशेषता के साथ चिह्नित है।

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

एपीआई

प्रपत्र फ़ील्ड के मान प्राप्त करने के लिए, निम्न कॉल करें

 var json = $(<>).jqDynaForm('get'); 

और यह निम्नलिखित संरचना का JSON ऑब्जेक्ट लौटाएगा:

 { "number": "123", "payer": "Fake Incorporated", "productArray": [ { "title": "HP Pavilion g7-2010nr 17.3-Inch", "price": "499.99", "amount": "3" }, { "title": "Samsung Galaxy Tab 2 (7-Inch, Wi-Fi)", "price": "248.00", "amount": "1" }, { "title": "HP Envy 4-1030us 14-Inch Ultrabook", "price": "779.99", "amount": "1" } ] } 

ध्यान दें कि डुप्लिकेट नेस्टेड ब्लॉक स्वचालित रूप से सरणियों में रखे जाते हैं। फ़ील्ड में मुख्य मान INPUT और SELECT टैग्स में नाम विशेषता है।

यदि आपके पास पहले से ही ऐसा रेडी-मेड JSON ऑब्जेक्ट है (स्क्रिप्ट द्वारा जनरेट किया गया है, या किसी डेटाबेस से पढ़ा जाता है), तो आप फॉर्म को एक कॉल के साथ फिर से बना सकते हैं।

  $(<__>).jqDynaForm('set', json); 

इस कॉल के बाद, हम भरे हुए फ़ील्ड और गठित नेस्टेड ब्लॉक के साथ मूल रूप प्राप्त करेंगे। बेशक, सही प्रारंभिक रूप और तैयार फ़ील्ड ब्लॉक के साथ।

अधिक जटिल उदाहरण

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

सुविधाओं

मैं सबसे महत्वपूर्ण विशेषताओं की सूची दूंगा:

• विशेष प्रतिबंधों के बिना मुफ्त HTML फॉर्म कोड
• ब्लॉक नेस्टिंग की पदानुक्रम की संरचना की सख्त परिभाषा
• कई स्तरों में घोंसले का निर्माण
• पुनरावर्ती संरचनाएं बनाना
• फ़ॉर्म भरते समय संरचना पर कार्य: एक ब्लॉक जोड़ना, एक ब्लॉक को हटाना, सॉर्ट करना और किसी अन्य अनुमत स्थान पर एक ब्लॉक (ड्रैग-एंड-ड्रॉप) को ब्लॉक करना।
• किसी भी संरचना के आकार को JSON ऑब्जेक्ट में बदलना
• JSON ऑब्जेक्ट से फ़ॉर्म को फिर से बनाना
• प्रोग्रामिंग की आवश्यकता के बिना एक फॉर्म बनाना। अनुकूलन विशेष विशेषताओं द्वारा परिभाषित किया गया है।

मैं भी निम्नलिखित सुविधाओं को जोड़ने की योजना बना रहा हूं:

• सरलीकृत नियमित अभिव्यक्ति क्षेत्र सत्यापन तंत्र
• बाहरी घटना संचालकों

JSON के साथ काम करें

प्राप्त JSON संरचना के साथ कैसे काम करें। इसे जावास्क्रिप्ट में संसाधित किया जा सकता है, इसे सर्वर पर भेजा जा सकता है और उदाहरण के लिए, php-array ट्री संरचना में बदल दिया जाता है।

आमतौर पर, फ़ील्ड मान डेटाबेस में संग्रहीत होते हैं। क्लासिक "फ्लैट" रूपों के साथ, सब कुछ स्पष्ट है। यह प्रपत्र संबंधपरक डेटाबेस तालिका में एक रिकॉर्ड में फिट होने के लिए बहुत अच्छा है। और यहाँ रूप पेड़-जैसा है, और क्रमशः डेटा संरचना, भी पेड़-जैसा है। कई भंडारण विकल्प हैं, यहाँ कुछ हैं:

• MongoDB का उपयोग करना (सबसे सुंदर विकल्प)
• एक नियमित संबंधपरक डेटाबेस में टेक्स्ट के रूप में JSON ऑब्जेक्ट को संग्रहीत करना। लेकिन यह हमेशा स्वीकार्य नहीं है यदि व्यक्तिगत रूप से फ़ील्ड के लिए अनुरोधों को पूरा करना आवश्यक है। इसलिए, हम निम्नलिखित समझौता विकल्प पर विचार करते हैं
• एक रिलेशनल डेटाबेस के क्षेत्र में शीर्ष-स्तरीय फ़ील्ड्स को संग्रहीत करना, और एक नेक्सस ऑब्जेक्ट्स के टेक्स्ट फ़ील्ड के रूप में नेस्टेड ब्लॉक के सभी फ़ील्ड्स को रिलेशनल डेटाबेस में एक ही रिकॉर्ड के अतिरिक्त फ़ील्ड्स में।
• सबसे उबाऊ विकल्प रिलेशनल डेटाबेस में प्रत्येक प्रकार के फ़ील्ड ब्लॉक के लिए एक अलग तालिका बनाना और JSON ऑब्जेक्ट को दरकिनार करके इन तालिकाओं को "मैन्युअल रूप से" पॉप्युलेट करना है।

क्या मुझे इस प्लगइन बनाने के लिए प्रेरित किया

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

यहाँ एक दुःस्वप्न परियोजना पर एक विशिष्ट प्रगति है। निम्नलिखित आवश्यकताएँ ग्राहक से एक निश्चित अवधि के लिए आती हैं:

• कंपनी डेटा संग्रहीत करने के लिए एक फ़ॉर्म बनाएं। वहां आपको केवल "नाम", "शहर", "सड़क", "घर" फ़ील्ड चाहिए।
• आउच! यह पता चला है कि एक कंपनी की कई शाखाएं हो सकती हैं। प्रपत्र में प्रत्येक शाखा का पता अलग से सेट करना संभव करें।
• हमने यहां सोचा था, हमें अभी भी यह सुनिश्चित करने की आवश्यकता है कि फॉर्म में प्रत्येक कंपनी कई परियोजनाओं को रिकॉर्ड कर सकती है जो इसे पूरा करती हैं।
• कृपया प्रत्येक शाखा में एक संपर्क व्यक्ति जोड़ें। और ... गयी? और प्रत्येक फोन पर किसी व्यक्ति का नाम कैसे इंगित करें? ... हमें प्रत्येक शाखा में बहुत से संपर्क व्यक्तियों से पूछने और प्रत्येक के लिए एक अलग फोन नंबर बताने में सक्षम होने की आवश्यकता है।

इन सभी बटनों को लगातार प्रोग्रामिंग करने के दुःस्वप्न से बचने के लिए - "ऐड", "डिलीट", "ट्रांसफर", डायनेमिक स्ट्रक्चर्स के गठन से पीड़ित नहीं, यह फील्ड वैल्यूज़ को प्रोसेस करने के लिए सुविधाजनक है, मैंने इस प्लगइन को बनाने के बारे में सोचा।

स्रोत कोड

मैं आपको पहले से चेतावनी देता हूं कि प्लगइन अभी भी कच्चा है। लेकिन अगर समाज में रुचि है, तो मैं इसे संशोधित करने और निम्नलिखित संस्करणों को पूरा करने की योजना बना रहा हूं।

प्रोजेक्ट पेज Google कोड पर है

आप यहां एक कार्यशील उदाहरण और स्रोत डाउनलोड कर सकते हैं

और यहां, आप एक जीवित उदाहरण के साथ खेल सकते हैं

पुनश्च: मुझे आपकी राय जानकर खुशी होगी।