खींचें और ड्रॉप UI के साथ सूची आइटम सॉर्ट क्रम को प्रबंधित करने का सबसे अच्छा तरीका क्या है?

Question

मेरे पास छात्रों की एक सूची है जिसे मुझे उपयोगकर्ता को सारणीबद्ध प्रारूप में वेब पेज पर प्रदर्शित करना चाहिए।
आइटम DBO में SortOrder जानकारी के साथ संग्रहीत हैं।

वेब पेज पर, उपयोगकर्ता इस पोस्ट के समान आइटमों को उनके इच्छित क्रम में ड्रैग और ड्रॉप करके सूची क्रम को पुनर्व्यवस्थित कर सकते हैं ।

नीचे मेरे परीक्षण पृष्ठ का स्क्रीनशॉट है।

उपर्युक्त उदाहरण में, प्रत्येक पंक्ति में क्रमबद्ध क्रमबद्ध जानकारी है। जब मैं स्टूडेंट आईडी 1 पंक्ति के ऊपर जॉन डो (छात्र आईडी 10) छोड़ता हूं, तो सूची क्रम अब होना चाहिए: 2, 10, 1, 8, 11।

क्रमबद्ध जानकारी को संग्रहीत और अद्यतन करने के लिए आशावादी (कम संसाधन भूख) तरीका क्या है?

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

बस FYI करें: मेरी तालिका में अधिकतम 25 पंक्तियाँ हो सकती हैं।

Comments

क्या आपको इस तरह के आदेश को सर्वर साइड पर बनाए रखने की आवश्यकता है, या यह केवल क्लाइंट की तरफ पर्याप्त है?

— डेटेरब

मुझे सर्वर-साइड पर ऑर्डर स्टोर करना चाहिए। अगर यह आदेश हर ड्रैग-ड्रॉप पर संग्रहीत है या एक बार और सभी के लिए एक बटन पर क्लिक करने से कोई फर्क नहीं पड़ता।

— अलेक्जेंडर

Answer 1

मेरे पास कुछ है, जो आपके प्रश्नों को कम कर सकता है। यहाँ मेरे उदाहरण में, मैंने columnनाम की छँटाई के लिए एक नया जोड़ा है pos। तो, शुरू में आपकी टेबल को घसीटे बिना किसी भी तरह होगा -

अब, विचार है कि आप घसीटा चलें Item 4के बीच Item 1और Item 2। अब, नई posमूल्य के लिए Item 4किया जाएगा (20 + 10) / 2, जो 15। इसलिए, आपको डेटाबेस में केवल एक पंक्ति को अपडेट करना होगा। और, आपको मिलेगा -

यहां धार मामलों के साथ एक फ़्लोचार्ट है। iघसीटने के बाद आपकी पंक्ति का नया सरणी सूचकांक है -

यह फ़्लोचार्ट ArrayOutOfBoundचेक को हैंडल नहीं करता है। और, किनारे के मामलों के लिए आपको एक से अधिक क्वेरी की आवश्यकता होगी।

चूँकि आपके पास केवल 25 पंक्तियाँ हैं, आप 10,000पॉस अंतर के लिए एक बहुत बड़ा मान (जैसे ) ले सकते हैं (मैंने 10इस उदाहरण के लिए लिया )। जितना बड़ा मूल्य होगा, उतना कम टकराएगा।

Comments

यह एक अच्छा तरीका है। ध्यान दें कि यदि आपको कोई आइटम सम्मिलित करने के लिए कोई जगह नहीं है, तो आपको पूरी जानकारी (या एक बड़ा हिस्सा) को पुनः ऑर्डर करना होगा। यह एक दुर्लभ पर्याप्त घटना होगी।

— 9000

@ 9000 समस्या से बचने के लिए आप पूर्णांक के बजाय दशमलव का उपयोग कर सकते हैं।

— रिफत

यदि आपके पास Item A123 की स्थिति है और Item C124 की स्थिति है, तो उनके Item B बीच कोई आसान तरीका नहीं है। एक समाधान आंशिक संख्याओं (जैसे तैरता है) का उपयोग करना होगा, लेकिन उनकी एक सीमित परिशुद्धता भी है। कभी-कभी आप एक नया करना, बेहतर करना, अंतराल को सामान्य करना और चीजों को सरल रखना बेहतर समझते हैं।

— 9000

तो जब आप i-- करते हैं, तो आप बस 1 से घटाते हैं। क्या कोई अलग अंतराल नहीं है जिससे आप अंत में टकराव को रोक सकते हैं?

— muttley91

@ रिफत भी दशमलव में एक सीमित परिशुद्धता है, इसलिए वे भी टकराएंगे।

— एससीआई 12

Answer 2

व्यक्तिगत रूप से मैं बैक एंड से डेटा के लिए JSON सरणी लौटाऊंगा। तब मैं डेटा प्रदर्शित करने और छाँटने और डेटा को फिर से छाँटने के लिए जावास्क्रिप्ट (JQuery या नॉकआउट) का उपयोग करूँगा। उस तरह से सर्वर पर जीरो लोड होता है।

Answer 3

आप इसे संभालने के लिए एक संसाधन-अनुकूल तरीके की तलाश कर रहे हैं लेकिन उपयोगकर्ता के अनुकूल परिप्रेक्ष्य भी आवश्यक है। मैं प्रत्येक reordered आइटम के बाद अलग-अलग अनुरोधों की सिफारिश करता हूं। प्रत्येक कॉल स्वीकार या विफल होने पर आपको जांचने की अनुमति देता है।

• असफल प्रतिक्रियाएं दृश्य को रीसेट कर देंगी और अंतिम-उपयोगकर्ता को एक संदेश प्रदर्शित करेंगी।
• स्वीकृत अनुरोधों को सरल रूप से जारी रखने की अनुमति देता है।

वैकल्पिक रूप से, JSON ऑब्जेक्ट (@ टॉम-स्क्वायर्स) का उपयोग HTTP ओवरहेड और सर्वर-साइड प्रोसेसिंग को कम करने के लिए एक अच्छा विचार है, लेकिन अंततः सर्वर और क्लाइंट पक्ष पर अनुरोधों को संभालने के लिए अधिक कोड की आवश्यकता होती है। यदि वह ठीक है, तो ऑब्जेक्ट को सर्वर में पास करना सबसे तकनीकी रूप से कुशल है। यदि आप यह चाहते हैं, तो यह एकल अनुरोध के लिए कई सेकंड के लिए अनुमति देने के लिए कुछ सेकंड की देरी के लिए भी अनुमति देता है।

ध्यान रखें, विफल अनुरोधों से प्रतिक्रिया के साथ एक उपयोगकर्ता प्रदान करने के लिए आपको सर्वर से एक प्रतिक्रिया JSON ऑब्जेक्ट पार्स करना होगा जो यह पता लगाने में विफल रहा है कि कौन सा आइटम विफल हो गया और इसके आधार पर यूआई रीसेट करें।

Answer 4

ड्रॉप इवेंट हैंडलर में कुछ इस तरह है, जहां ई डीएनडी इवेंट है।

        ....
        if (e.Action == DragAction.Drop)
        {
            foreach(var item in Items)
            {
                if (e.NewIndex == e.OldIndex) // Dropped in same place
                    return;
                if(e.OldIndex > e.NewIndex) // Moved Up
                {
                    if (item.SortOrder >= e.NewIndex && item.SortOrder < e.OldIndex)
                    {
                        item.SortOrder ++;
                    }
                }
                else // Moved Down
                {
                    if (item.SortOrder> e.OldIndex && item.SortOrder < e.NewIndex) 
                    {
                        item.SortOrder --;
                    }
                }   
            }
            ((Student)e.ItemData).SortOrder = e.NewIndex;
        }
    ...