विकल्पों के लिए घटक

URL में ID का उपयोग करने के बजाय आप सूची से किसी देश का चयन करने की क्षमता वाले विशेष Select घटक का उपयोग करके फ़िल्टरिंग बनाना पसंद कर सकते हैं। पहले, हम पहले से ही Relselect घटक का उपयोग कर चुके हैं, और इसके काम का तर्क बहुत समान है, लेकिन Select के लिए धन्यवाद, हम न केवल सभी उपलब्ध देशों से एक विकल्प की पेशकश कर सकते हैं, बल्कि अपने स्वयं के विकल्प भी जोड़ सकते हैं।

घटक Select

आइए Select सेटिंग को देखें, वह विकल्प जो यह निर्धारित करेगा कि कौन से शहर कौन से देश तालिका में होने चाहिए, और सामान्य रूप से सभी उपलब्ध शहरों को दिखाने की क्षमता को जोड़ा गया है।

Select घटक बनाते समय, इसे उन विकल्पों से भरा जाना चाहिए जिनसे चयन किया जाएगा। ऐसा करने के लिए, जैसा कि Relselect में है, आपको देशों की एक सामान्य सूची प्राप्त करने की आवश्यकता है। लेकिन फिर हम इस सूची को सीधे Select को नहीं भेजते बल्कि इसे उपलब्ध विकल्पों में बदल देते हैं, जिनमें से प्रत्येक को Select Option मॉडल के रूप में दर्शाया जाता है। इसलिए, हम Select Options सरणी को एक चर के रूप में घोषित करते हैं और इसे लूप में आवश्यक डेटा से भरते हैं।

इस उदाहरण में, हमारे लिए आवश्यक Select Options फ़ील्ड Label (प्रस्तावित विकल्प का पाठ) और Value (इसका संख्यात्मक पहचानकर्ता) होगा। इन मानों को देश के नाम और उसकी आईडी पर सेट करें।

जब लूप पूरा हो जाता है तो हमें एक और विकल्प बनाना और जोड़ना चाहिए जो सभी उपलब्ध शहरों को देशों द्वारा फ़िल्टर किए बिना दिखाएगा। आइए Label = World और Value = 0 सेट करें।

जब आप कोई विकल्प चुनते हैं, तो Select onChange ट्रिगर सक्रिय हो जाएगा। आइए इसका उपयोग चयनित विकल्प का पता लगाने के लिए करें और इसे नए वैश्विक चर Country selected में लिखें। इस मामले में, एक अतिरिक्त जांच करना आवश्यक है, और यदि अंतिम विकल्प (सभी उपलब्ध शहरों) का चयन किया गया था, तो इस चर का मान खाली ( null ) पर सेट किया जाना चाहिए।

इस व्यवसाय प्रक्रिया की अंतिम क्रिया Refresh करें बटन पर क्लिक करना शुरू करना है, जो तालिका में डेटा को ताज़ा करता है। एक नए चर के उद्भव को ध्यान में रखते हुए इसकी व्यावसायिक प्रक्रिया को भी थोड़ा बदलने की जरूरत है।

अब हम चुन सकते हैं कि किस देश के शहरों को तालिका में दिखाया जाना चाहिए।

Dropdown घटक

और अंत में, आइए एक अन्य घटक को देखें जो आपको विभिन्न विकल्पों को चुनने की अनुमति देता है - Dropdown । इसका मुख्य अंतर यह है कि किसी विशेष विकल्प का चयन करने से चयनित विकल्प को याद रखने के बजाय तुरंत कुछ कार्रवाई शुरू हो जानी चाहिए। इसे विस्तारित कार्यक्षमता वाला बटन कहा जा सकता है।

उदाहरण के लिए, आइए Dropdown को तालिका में देश को हटाएं बटन के प्रतिस्थापन के रूप में उपयोग करें। अब यह डेटाबेस में प्रविष्टि को तुरंत नहीं हटाएगा बल्कि अतिरिक्त विकल्पों को कॉल करेगा जहां आप या तो विलोपन की पुष्टि कर सकते हैं या इसे रद्द कर सकते हैं।

आइए घटक के सामान्य विन्यास से शुरू करें। आइए इसकी उपस्थिति और उपलब्ध विकल्पों को चुनें।

इसके बाद, हम स्वयं व्यवसाय प्रक्रिया बनाएंगे। और इसमें सबसे पहले कार्रवाई उस रिकॉर्ड को निर्धारित करने की होगी जिसके लिए Dropdown क्लिक किया गया था। साधारण बटनों के लिए, यह मान एक Record ID के रूप में पारित किया जाता है, लेकिन इस मामले में, Dropdown को भी नहीं दबाया जाएगा, बल्कि वांछित विकल्प के साथ इसके चाइल्ड घटक को दबाया जाएगा। इसलिए, प्रवेश आईडी प्राप्त करना थोड़ा अधिक जटिल है।

तालिका तत्वों को दोहराने के लिए, Component ID में दो भाग होते हैं, जिन्हें "-" चिह्न से अलग किया जाता है। पहला भाग मानक घटक आईडी है। लेकिन दूसरा भाग सिर्फ रिकॉर्ड आईडी है, जिसके अतिरिक्त दोहराए जाने वाले घटकों के पहचानकर्ता को अद्वितीय बनाता है।

यह जानकर हमें बस यह आईडी प्राप्त करनी होगी। इसलिए, हम स्ट्रिंग को भागों ( Split string ) में विभाजित करेंगे और दूसरे भाग ( index = 1 ) का मान ज्ञात करेंगे।

अगले चरण के रूप में हमें यह पता लगाना होगा कि कौन सा विकल्प चुना गया था।

यदि यह वास्तव में विलोपन की पुष्टि करने का एक विकल्प है, तो उपयुक्त कमांड चलाएँ। अन्यथा, आप कुछ नहीं कर सकते क्योंकि कुछ कार्रवाई की आवश्यकता नहीं है।

अब डेटाबेस से रिकॉर्ड हटाना आकस्मिक क्लिकों से सुरक्षित है।