วิธีที่ดีที่สุดในการจัดการลำดับการเรียงรายการด้วย Drag & Drop UI คืออะไร

10

ฉันมีรายชื่อนักเรียนที่ฉันควรแสดงต่อผู้ใช้บนเว็บเพจในรูปแบบตาราง
รายการจะถูกเก็บไว้ในฐานข้อมูลพร้อมกับเรียงลำดับข้อมูล

ในหน้าเว็บผู้ใช้สามารถจัดเรียงลำดับรายการใหม่ได้โดยการลากและวางรายการลงในลำดับการจัดเรียงที่ต้องการคล้ายกับโพสต์นี้

ด้านล่างเป็นภาพหน้าจอของหน้าทดสอบของฉัน
ป้อนคำอธิบายรูปภาพที่นี่

ในตัวอย่างข้างต้นแต่ละแถวมีข้อมูลการเรียงลำดับที่แนบมา เมื่อฉันวาง John Doe (รหัสนักเรียน 10) เหนือแถวรหัสนักศึกษา 1 ลำดับรายการควรเป็น: 2, 10, 1, 8, 11

วิธีการมองโลกในแง่ดี (หิวทรัพยากรน้อยลง) ในการจัดเก็บและอัปเดตข้อมูลเรียงลำดับคืออะไร

ตอนนี้ความคิดเดียวของฉันคือสำหรับทุกการเปลี่ยนแปลงในลำดับการเรียงของรายการค่า SortOrder ของทุกวัตถุควรได้รับการอัปเดตซึ่งในความคิดของฉันเป็นทรัพยากรที่หิว

แค่ FYI: ฉันอาจมีแถวได้ไม่เกิน 25 แถวในตาราง

c# sorting

— อเล็กซานเด
แหล่งที่มา

1

คุณต้องการให้ลำดับการเรียงนี้ยังคงอยู่ในฝั่งเซิร์ฟเวอร์หรือมีเพียงฝั่งไคลเอ็นต์เพียงพอหรือไม่

— ขัดขวาง

1

ฉันควรเก็บคำสั่งซื้อที่ฝั่งเซิร์ฟเวอร์ มันไม่สำคัญว่าคำสั่งซื้อจะถูกเก็บไว้ในการลากหรือวางโดยการคลิกที่ปุ่มเพียงครั้งเดียวและสำหรับทั้งหมด

— Alexander

10

ฉันคิดถึงบางสิ่งบางอย่างซึ่งสามารถลดข้อสงสัยของคุณ ที่นี่ในตัวอย่างของฉันฉันได้เพิ่มใหม่สำหรับการจัดเรียงชื่อcolumn posดังนั้นเริ่มแรกโดยไม่ต้องลากโต๊ะของคุณจะเป็นเช่น -

รัฐเริ่มต้น

ตอนนี้ช่วยให้พิจารณาว่าคุณลากItem 4ระหว่าง&Item 1 Item 2ตอนนี้ใหม่posค่าสำหรับItem 4จะเป็นซึ่งเป็น(20 + 10) / 2 15ดังนั้นคุณจะต้องอัปเดตแถวเดียวในฐานข้อมูล และคุณจะได้รับ -

หลังจากลาก

นี่คือแผนผังลำดับงานพร้อมตัวเรือนขอบ iคือดัชนีแถวใหม่ของแถวหลังจากที่ลาก -

แผนภูมิการไหล

แผนผังลำดับงานนี้ไม่จัดการกับArrayOutOfBoundเช็ค และสำหรับกรณีขอบคุณจะต้องมีมากกว่าหนึ่งแบบสอบถาม

เนื่องจากคุณมี 25 แถวเท่านั้นคุณสามารถรับค่าที่ใหญ่มาก (เช่น10,000) สำหรับความแตกต่าง pos (ฉันเอา10ตัวอย่างนี้มา) ยิ่งค่ายิ่งมากเท่าไหร่ก็ยิ่งชนน้อยลงเท่านั้น

— Rifat
แหล่งที่มา

นี่เป็นวิธีการที่ดี โปรดสังเกตว่าคุณจะต้องคำนวณข้อมูลการสั่งซื้อใหม่ทั้งหมด (หรือส่วนใหญ่) หากไม่มีที่ว่างในการแทรกรายการ มันจะเป็นเหตุการณ์ที่หายากพอที่จะทนกับ

— 9000

@ 9000 คุณสามารถใช้ทศนิยมแทนจำนวนเต็มเพื่อหลีกเลี่ยงปัญหา

— Rifat

หากคุณมีItem Aตำแหน่งที่ 123 และItem Cตำแหน่งที่ 124 ไม่มีวิธีง่ายๆในการใส่Item B ระหว่างสองตำแหน่ง ทางออกหนึ่งจะใช้ตัวเลขเศษส่วน (เช่นลอย) แต่พวกเขาก็มีความแม่นยำ จำกัด เช่นกัน บางครั้งคุณก็ยังดีกว่าที่จะทำการจัดลำดับใหม่ปรับช่วงเวลาและทำให้สิ่งต่าง ๆ เป็นเรื่องง่าย

— 9000

ดังนั้นเมื่อคุณทำ i - คุณแค่ลบด้วย 1 ไม่มีช่วงเวลาอื่นที่คุณสามารถลบได้เพื่อป้องกันการชนในที่สุดหรือไม่?

— muttley91

@Rifat แม้ทศนิยมมีความแม่นยำ จำกัด ดังนั้นพวกเขาก็จะชนกัน

— SCI

3

โดยส่วนตัวแล้วฉันจะส่งคืนอาร์เรย์ JSON สำหรับข้อมูลจากส่วนท้าย จากนั้นฉันจะใช้ JavaScript (JQuery หรือสิ่งที่น่าพิศวง) เพื่อแสดงและจัดเรียงและเรียงลำดับข้อมูลใหม่ วิธีการเรียงลำดับมีการโหลดเป็นศูนย์บนเซิร์ฟเวอร์

— ทอมสไควร์ส
แหล่งที่มา

0

คุณกำลังมองหาวิธีที่เป็นมิตรกับทรัพยากรในการจัดการสิ่งนี้ แต่มุมมองที่เป็นมิตรกับผู้ใช้ก็เป็นสิ่งจำเป็นเช่นกัน ฉันขอแนะนำแต่ละคำขอหลังจากแต่ละรายการที่จัดลำดับใหม่ การโทรแต่ละครั้งจะช่วยให้คุณตรวจสอบว่าได้รับการยอมรับหรือล้มเหลว

การตอบกลับที่ล้มเหลวจะรีเซ็ตมุมมองและแสดงข้อความถึงผู้ใช้ปลายทาง
คำขอที่ได้รับการยอมรับง่ายช่วยให้การแก้ไขอย่างต่อเนื่อง

อีกวิธีหนึ่งคือการใช้ออบเจ็กต์ JSON (@ tom-squires) เป็นความคิดที่ดีในการลดค่าใช้จ่าย HTTP และการประมวลผลฝั่งเซิร์ฟเวอร์ แต่ท้ายที่สุดต้องการรหัสเพิ่มเติมเพื่อจัดการกับคำขอบนเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ หากเป็นเช่นนั้นการส่งวัตถุไปยังเซิร์ฟเวอร์นั้นมีประสิทธิภาพทางเทคนิคมากที่สุด นอกจากนี้ยังช่วยให้การล่าช้าสองสามวินาทีเพื่ออนุญาตให้มีการจัดเรียงซ้ำหลายครั้งก่อนที่จะมีคำขอเดียวหากคุณต้องการสิ่งนี้

โปรดทราบว่าเพื่อให้ผู้ใช้มีข้อเสนอแนะจากคำขอที่ล้มเหลวคุณจะต้องวิเคราะห์คำตอบของวัตถุ JSON จากเซิร์ฟเวอร์เพื่อหาว่ารายการใดล้มเหลวและรีเซ็ต UI ตามนั้น

— David Garza
แหล่งที่มา

-1

บางอย่างเช่นนี้ในตัวจัดการเหตุการณ์การปล่อยโดยที่ e คือเหตุการณ์ DnD

        ....
        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;
        }
    ...

— เข้ามา
แหล่งที่มา