Yahoo! उपयोगकर्ता इंटरफ़ेस ब्लॉग (YUIBlog)

थोक संपादक विजेट: YUI 3 गैलरी

QuickEdit प्लगइन के लिए YUI 3 DataTable के आसान एक परमाणु आपरेशन के रूप में अभिलेखों का एक पूरे पृष्ठ को संपादित करने के लिए बनाता है. लेकिन, कभी कभी आप भी अधिक करने की जरूरत है. उदाहरण के लिए, आप एक साथ अधिक रिकॉर्ड की तुलना में आप आराम से एक ही पृष्ठ पर फिट कर सकते हैं संपादित हो सकता है. या आप को जोड़ने, duplicating, और परमाणु ऑपरेशन के भाग के रूप में रिकॉर्ड को हटाने का समर्थन की आवश्यकता हो सकती है. या आप उन्हें एक एकल तालिका सेल में रखकर नेत्रहीन समूह क्षेत्रों के लिए करना चाहते हो सकता है. थोक संपादक विजेट इन सभी संभावनाओं का समर्थन करता है.

( इस उदाहरण के साथ खेलने के लिए स्क्रीनशॉट पर क्लिक करें .)

अवलोकन

थोक संपादक विजेट तीन घटक होते हैं:

Data source

यह लपेटता एक YUI डेटास्रोत और परिवर्तनों को प्रबंधित करता है: सम्मिलन, हटाने, और बदल मूल्यों.

Base widget

यह प्रत्येक अभिलेख के भीतर रिकॉर्ड और क्षेत्रों के प्रबंधन द्वारा संपादन के लिए बुनियादी संरचना प्रदान करता है. व्युत्पन्न वर्ग एक अलग पंक्ति है, जो एक div tbody, या हो सकता है कुछ अन्य कंटेनर में प्रत्येक अभिलेख के प्रतिपादन के लिए जिम्मेदार हैं.

HTML table implementation

इस बेस के tbody में एक HTML तालिका में प्रत्येक अभिलेख प्रस्तुत करना विजेट फैली हुई है. स्तंभ विन्यास निर्धारित करता है जो क्षेत्र तालिका के प्रत्येक स्तंभ में प्रदर्शित किया जाता है. एक कस्टम सेल फ़ॉर्मेटर एक एकल तालिका सेल में कई क्षेत्रों रेंडर करने के लिए इस्तेमाल किया जा सकता है.

विन्यास

उदाहरण है कि ऊपर के स्क्रीनशॉट उत्पन्न में, विन्यास के रूप में संभव के रूप में सरल रखा गया है:

fields प्रत्येक रिकॉर्ड में संपादन योग्य मान को परिभाषित करता है. डिफ़ॉल्ट प्रकार इनपुट है. अन्य वैध प्रकार का चयन करें और textarea हैं. (चुनिंदा मानों की किसी सूची की आवश्यकता है.) मूल मान्यता द्वारा प्रदान की गई है फार्म प्रबंधक गैलरी मॉड्यूल. यह आवश्यक क्षेत्रों को शामिल किया गया है , लंबाई प्रतिबंध, और संख्यात्मक श्रेणियों . अधिक जटिल मान्यता निर्दिष्ट regex द्वारा किया जा सकता है या अपने खुद के समारोह ( fn ). यहाँ लाइव उदाहरण से एक अंश है:

 var क्षेत्रों =
 {
	 शीर्षक:
	 {
		 प्रकार: textarea
	 },
	 वर्ष:
	 {
		 मान्यता:
		 {
			 सीएसएस: 'yiv पूर्णांक [] 1500,2100'
		 }
	 },
	 रंग:
	 {
		 प्रकार: 'चुनें'
		 मूल्यों:
		 [
			 , {'लाल' मूल्य: 'लाल', पाठ}
			 , {'ग्रीन मूल्य:' हरी ', पाठ}
			 {मूल्य: 'नीले पाठ:' ब्लू '}
		 ]
	 }
 };

Y.BulkEditDataSource का एक उदाहरण की आवश्यकता Y.DataSource और निम्न पैरामीटर:

uniqueIdKey

एक कुंजी है जो विशिष्ट प्रत्येक रिकॉर्ड की पहचान की नाम.

generateRequest

एक समारोह के लिए अनुरोध पैरामीटर उत्पन्न करने के लिए Y.DataSource . (इस उदाहरण में खाली है, है क्योंकि Y.DataSource.Local हमेशा सभी डेटा देता है.)

extractTotalRecords

एक समारोह से रिकॉर्ड की कुल संख्या निकालने Y.DataSource प्रतिक्रिया.

के बाद से उदाहरण का उपयोग करता है Y.DataSource.Local , totalRecordsReturnExpr भी आवश्यक है. इस OGNL अभिव्यक्ति निर्दिष्ट करता है रिकॉर्ड की कुल संख्या की दुकान करने के लिए प्रतिक्रिया में जहां. (सूचना है कि extractTotalRecords इस मान को पढ़ता है.)

 var के डी एस = नई Y.BulkEditDataSource के (
 {
	 डी एस: raw_ds,
	 : uniqueIdKey 'आईडी'
	 generateRequest: function () {},
	 totalRecordsReturnExpr. meta.totalRecords '
	 extractTotalRecords: समारोह (प्रतिक्रिया)
	 {
		 response.meta.totalRecords लौटने;
	 }
 });

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

 var कॉलम =
 [
	 {
		 कुंजी: 'चेकबॉक्स',
		 लेबल: '<input type="checkbox" id="select-all" />,
		 फ़ॉर्मेटर: समारोह (ओ)
		 {
			 var मार्कअप = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (मार्कअप,
			 {
				 आईडी: this.getRecordId (o.record)
			 }));
		 }
	 },
	 , {'शीर्षक' कुंजी: 'शीर्षक', लेबल}
	 , {'वर्ष' कुंजी: 'वर्ष', लेबल}
	 {कुंजी: 'रंग', लेबल: 'रंग'}
 ]

(ध्यान दें कि जीना उदाहरण के लिए एक छोटी सी विस्तार को परिभाषित करता है Y.HTMLTableBulkEditor चेकबॉक्स को स्तंभ को संभाल.)

तुम भी एक उदाहरण के पारित कर सकते हैं Y.Paginator Y.BulkEditDataSource . यह एक अलग है, और अधिक जटिल में प्रदर्शन किया है जीना उदाहरण है .

स्थानीय बनाम दूरस्थ डेटा स्रोत

जब तय है कि एक स्थानीय या एक डेटास्रोत दूरदराज के उपयोग करने के लिए, आप ध्यान से व्यापार-offs पर विचार करना चाहिए. व्यापार स्पष्ट है कि एक स्थानीय डेटा स्रोत तेजी से होता है जब paginating, लेकिन प्रारंभिक पृष्ठ लोड लंबे समय तक ले जाएगा, और यह ग्राहक पर अधिक स्मृति की आवश्यकता है.

थोक संपादक विजेट अतिरिक्त व्यापार - नापसंद, लेकिन लगाता है.

सबसे पहले, डेटास्रोत YUI अपरिवर्तनीय डेटा को वापस चाहिए. यह स्थानीय डेटा स्रोतों के लिए स्वचालित है, लेकिन दूरदराज के डेटा स्रोतों के लिए लागू करने के लिए मुश्किल हो सकता है. आप थोक संपादित आपरेशन की अवधि के लिए अपने डेटाबेस तालिका में पंक्तियों को लॉक अगर एक से अधिक उपयोगकर्ता के लिए उन्हें संशोधित करने की अनुमति दी है की आवश्यकता होगी.

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

वास्तविक दुनिया के उपयोग के मामले

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

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

के बारे में लेखक: जॉन Lindal ( @ jafl5272 चहचहाना पर) नेतृत्व जिस पर नींव का निर्माण करने के लिए इंजीनियरों में से एक है याहू! एपीटी बनाया गया है. पहले, वह याहू प्रकाशक नेटवर्क पर काम किया.

बातचीत खोजें: Bloglines | technorati

साझा करें और विस्तार: del.icio.us साथ पसंद | digg यह! | reddit!