Sürükle ve Bırak arayüzüyle liste öğesi sıralama düzenini yönetmenin en iyi yolu nedir?


10

Bir web sayfasında kullanıcıya tablo biçiminde görüntülemem gereken Öğrenci listem var.
Öğeler, SortOrder bilgileriyle birlikte DB'de saklanır.

Web sayfasında kullanıcı, öğeleri bu gönderiye benzer şekilde sürükleyip bırakarak liste sırasını yeniden düzenleyebilir .

Test sayfamın ekran görüntüsü aşağıdadır.
resim açıklamasını buraya girin

Yukarıdaki örnekte, her satırın kendisine eklenmiş sıralama düzeni bilgileri vardır. John Doe (Öğrenci Kimliği 10) Öğrenci Kimliği 1 satırının üstüne düştüğümde, liste sırası şimdi: 2, 10, 1, 8, 11 olmalıdır.

Sıralama Düzeni bilgilerini depolamanın ve güncellemenin iyimser (daha az kaynağa aç) yolu nedir?

Şimdilik tek fikrim, listenin sıralama düzenindeki her değişiklik için, her nesnenin SortOrder değerinin güncellenmesi gerektiğine göre, bence çok kaynak aç.

Sadece FYI: Masamda en fazla 25 satır olabilir.


1
Bu sıralama düzeninin sunucu tarafında kalması mı yoksa yalnızca istemci tarafında yeterli olması mı gerekiyor?
2012'de

1
Siparişi sunucu tarafında saklamalıyım. Siparişin her sürükle bırakta depolanması veya bir düğmeyi bir kez ve herkes için tıklaması önemli değildir.
Alexander

Yanıtlar:


10

Sorgularınızı azaltabilecek bir şey düşündüm. Burada columnörneğimde, adlandırılmış sıralama için yeni bir ekledim pos. Yani, başlangıçta herhangi bir sürükleme olmadan tablonuz gibi olacak -

Başlangıç ​​hali

Şimdi, & Item 4arasında sürüklediğinizi düşünelim . Şimdi, yeni değer olacak , yani . Bu nedenle, veritabanında yalnızca tek bir satırı güncellemeniz gerekir. Ve alacaksınız -Item 1Item 2posItem 4(20 + 10) / 215

Sürüklendikten Sonra

İşte uç durumları olan bir akış şeması. isürüklendikten sonra satırınızın yeni dizi dizinidir -

Akış Şeması

Bu akış şeması ArrayOutOfBoundkontrolleri işlemez . Ve kenar durumlarda birden fazla sorguya ihtiyacınız olacaktır.

Yalnızca 25 satırınız olduğundan, 10,000poz farkı için çok büyük bir değer (örneğin ) alabilirsiniz ( 10bu örnek için aldım ). Değer ne kadar büyük olursa, o kadar az çarpışır.


Bu hoş bir yaklaşım. Bir öğe eklemek için yer yoksa, sipariş bilgilerinin tamamını (veya büyük bir kısmını) yeniden hesaplamanız gerektiğine dikkat edin. Katılmak için yeterince nadir bir olay olurdu.
9000

@ 9000 sorunu önlemek için tamsayı yerine ondalık kullanabilirsiniz.
Rifat

Item A123. pozisyona ve Item C124. pozisyona sahipseniz, bunların Item B arasına koymanın kolay bir yolu yoktur . Bir çözüm kesirli sayılar (örn. Şamandıralar) kullanmaktır, ancak sınırlı bir hassasiyete sahiptir. Bazen bir yeniden numaralandırma yapmak, aralıkları normalleştirmek ve işleri basit tutmak daha iyidir.
9000

Yani ben yaptığınızda, sadece 1 ile çıkarıyorsunuzdur.
muttley91

@Rifat ondalık sayılar bile sınırlı bir hassasiyete sahiptir, bu yüzden de çarpışırlar.
SCI

3

Şahsen ben arka ucundan veri için bir JSON dizi dönecekti. Sonra verileri görüntülemek ve sıralamak ve yeniden sıralamak için JavaScript (JQuery veya nakavt) kullanırdım. Bu şekilde sıralamanın sunucu üzerinde sıfır yükü olur.


0

Bunu ele almak için kaynak dostu bir yol arıyorsunuz, ancak kullanıcı dostu bir bakış açısı da bir zorunluluktur. Her yeniden sipariş edilen öğeden sonra tek tek istekler öneririm. Her çağrı kabul veya başarısız olup olmadığını kontrol etmenizi sağlar.

  • Başarısız yanıtlar görünümü sıfırlar ve son kullanıcıya bir mesaj görüntüler.
  • Kabul edilen istekler basit, sürekli düzenlemeye izin verir.

Alternatif olarak, bir JSON nesnesi (@ tom-squires) kullanmak HTTP ek yükünü ve sunucu tarafı işlemeyi azaltmak için iyi bir fikirdir, ancak sonuç olarak sunucu ve istemci tarafında istekleri işlemek için daha fazla kod gerektirir. Bu sorun yoksa, nesneyi sunucuya iletmek en teknik olarak verimlidir. İsterseniz, tek bir istekten önce birden çok yeniden sıralamaya izin vermek için birkaç saniyelik bir gecikmeye de izin verir.

Bir kullanıcıya başarısız isteklerden geri bildirim sağlamak için, hangi öğenin başarısız olduğunu anlamak ve buna göre kullanıcı arayüzünü sıfırlamak için bir yanıt JSON nesnesini sunucudan ayrıştırmanız gerekir.


-1

E olayı DnD olayı olduğu drop event handler'da böyle bir şey.

        ....
        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;
        }
    ...
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.