Qual è il modo migliore per gestire l'ordinamento delle voci di elenco con l'interfaccia utente di trascinamento e rilascio?

Question

Qual è il modo migliore per gestire l'ordinamento delle voci di elenco con l'interfaccia utente di trascinamento e rilascio?

#1 da (10 voti)
#2 da (3 voti)
#3 da (0 voti)
#4 da (-1 voti)

9

Ho una lista di studenti che dovrei mostrare all'utente su una pagina web in formato tabulare.
Gli articoli sono memorizzati nel DB insieme alle informazioni SortOrder.

Sulla pagina web, l'utente può riorganizzare l'ordine della lista trascinando gli elementi nell'ordine di ordinamento desiderato, in modo simile a questo post .

Di seguito è riportato uno screenshot della mia pagina di test.

Nell'esempio precedente, a ciascuna riga sono associate informazioni sull'ordinamento. Quando rilascio John Doe (ID studente 10) sopra la riga ID studente 1, l'ordine delle liste ora dovrebbe essere: 2, 10, 1, 8, 11.

Qual è il modo ottimista (meno affamato di risorse) per archiviare e aggiornare le informazioni dell'Ordinamento?

La mia unica idea per ora è, per ogni cambiamento nell'ordinamento della lista, il valore SortOrder di ogni oggetto dovrebbe essere aggiornato, che a mio avviso è molto affamato di risorse.

Solo FYI: potrei avere al massimo 25 righe nel mio tavolo.

c# sorting

posta Alexander 21.06.2012 - 06:03

fonte

4 risposte

Leggi altre domande sui tag c# sorting

Chi ha coniato per la prima volta il termine Funzione di ordine superiore e / o Cittadino di prima classe? Che cosa è un buon aggiornamento rapido degli algoritmi? [chiuso]

score 10 · Answer 1

Ho pensato a qualcosa, che può ridurre le tue domande. Qui nel mio esempio, ho aggiunto un nuovo column per l'ordinamento chiamato pos . Quindi, inizialmente senza trascinare la tua tabella sarà come -

Ora,consideriamochehaitrascinatoItem4traItem1&%codice%.Ora,ilnuovovaloreItem2perpossaràItem4,cheè(20+10)/2.Quindi,dovraisoloaggiornareunasingolariganeldatabase.Eotterrai-

Ecco un diagramma di flusso con i casi limite. 15 è il nuovo indice di array della tua riga dopo trascinato -

Questo diagramma di flusso non gestisce i controlli i . E, per i casi limite, avrai bisogno di più di una query.

Dato che hai solo 25 righe, puoi prendere un valore molto grande (ad esempio ArrayOutOfBound ) per la differenza di posizione (ho preso 10,000 per questo esempio). Più grande è il valore, meno si scontrerà.

score 3 · Answer 2

3

Personalmente restituirei un array JSON per i dati dal back-end. Quindi userei JavaScript (JQuery o knockout) per visualizzare, ordinare e riordinare i dati. In questo modo l'ordinamento ha un carico zero sul server.

risposta data 21.06.2012 - 09:19

fonte

score 0 · Answer 3

Sei alla ricerca di un modo di gestire le risorse per gestire questo, ma la prospettiva user-friendly è anche un must. Raccomando le singole richieste dopo ogni articolo riordinato. Ogni chiamata consente di verificare se accettata o non riuscita.

Le risposte non riuscite resetteranno la vista e mostreranno un messaggio all'utente finale.
Le richieste accettate semplici consentono la modifica continua.

In alternativa, l'uso di un oggetto JSON (@ tom-squires) è una buona idea per ridurre l'overhead HTTP e l'elaborazione lato server, ma in definitiva richiede più codice per gestire le richieste sul lato server e client. Se ciò è OK, passare l'oggetto al server è tecnicamente più efficiente. Permette anche un ritardo di un paio di secondi per consentire riordini multipli prima di una singola richiesta, se lo desideri.

Tieni presente che, per fornire a un utente un feedback delle richieste non riuscite, è necessario analizzare un oggetto JSON di risposta dal server per capire quale elemento ha avuto esito negativo e reimpostare l'interfaccia utente in base a quello.

score -1 · Answer 4

Qualcosa di simile nel gestore di eventi drop, dove e è l'evento 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;
        }
    ...