Riordinare le righe di una GridView di ASP.NET con jQuery

di Riccardo D'Aria, in ASP.NET 4.0, AJAX, jQueryUserScript,

Spesso abbiamo la necessità di definire l'ordine sequenziale con cui, immagini, files, news o altro devono essere presentati all'utente di un sito web. Applicando il componente Sortable di jQuery UI a una GridView, abbiamo la possibilità di realizzare un'interfaccia in cui le righe possono essere spostate verso l'alto o verso il basso con semplici drag & drop del mouse.

Il Markup della GridView

Affinché possa essere utilizzata in questo contesto, la griglia deve possedere almeno due colonne, che possono essere nascoste o lasciate visibili a seconda delle esigenze di layout.

  • colonna id, che deve contenere gli identificativi dei record della tabella;
  • colonna ordinale, destinata a contenere il numero progressivo che indica l'ordinamento sequenziale delle righe.

Oltre a questi due elementi necessari, possiamo ovviamente aggiungere tutti i campi che riteniamo opportuni.

<asp:GridView ID="GridView1" runat="server" ...>
  <Columns>
    <asp:BoundField DataField="id" HeaderText="ID" />
    <asp:BoundField DataField="ordinale" HeaderText="Ordine" />
    <asp:BoundField DataField="nome" HeaderText="Nome" />
  </Columns>
</asp:GridView>

Il codice JavaScript

Per attivare la funzionalità di drag and drop sulla griglia, sono necessarie alcune righe di codice JavaScript (oltre ad aggiungere jQuery e jQuery UI) agli script referenziati:

$(function() {
  $("#GridView1 tbody.content").disableSelection();
  $("#GridView1 tbody").addClass('content');
  $("#GridView1 tbody.content").sortable(); 
});

Il significato delle istruzioni è il seguente:

  • Con disableSelection abbiamo disabilitato la selezione del testo all'interno della griglia, altrimenti durante il drag & drop selezioneremmo anche il testo presente nelle celle, dando vita ad una certa confusione;
  • Con addClass abbiamo assegnato la classe content al tag tbody della griglia, all'interno della quale possiamo per esempio impostare lo stile del cursor a move, così da mostrare il cursore del mouse più adeguato.
  • Con sortable attiviamo effettivamente la possibilità di spostare le righe della griglia con il drag & drop.

Salvare il nuovo ordinamento dato alle righe

A seguito di ogni operazione di drag & drop, è necessario che il nuovo ordinamento dei dati venga inviato al server, così che possiamo memorizzarlo (per esempio in un database) e preservare l'ordinamento a ogni renderizzazione della pagina. Per farlo, possiamo avvalerci della funzione stop di Sortable di jQuery. Possiamo modificare lo script precedente in questo modo:

$(function() {
  $("#GridView1 tbody.content").disableSelection();
  $("#GridView1 tbody").addClass('content');
  $("#GridView1 tbody.content").sortable({
    stop: function(event, ui) {          
      arrayId = new Array();
      arrayOrdinali = new Array();
      
      var rows = document.getElementById ('GridView1').rows;
      //loop sulla griglia per riscrivere l'ordine
      for (var index=1; index<rows.length; index++) {
        // Rieseguo la numerazione nel campo ordinale da 1 a n, in modo
        // da mostrare sempre la giusta e naturale sequenza  (1,2,3,4 ....n)
        rows[index].cells[1].innerHTML=index;

        // Creo gli array delle coppie valori id record e ordinale da inviare 
        // al server per essere riscritti sul database *
        arrayId[index]= rows[index].cells[0].innerHTML
        arrayOrdinali[index]= rows[index].cells[1].innerHTML
      }

      // Con una chiamata ad un web service si inviano al server 
      // i due vettori di dati che possono essere processati per 
      // salvare il nuovo ordinamento
      storageWebService.storeSort(arrayId, arrayOrdinali)
    }
  });
});

Nella funzione stop eseguiamo tre operazioni:

  • Ricalcoliamo la numerazione del campo ordinale della griglia in modo da mostrare sempre la naturale sequenza delle righe secondo la sequenza naturale positiva da 1 a n;
  • Compiliamo due vettori (arrayId, arrayOrdinali) che contengono rispettivamente, gli id dei record mostrati in griglia e la loro posizione secondo l'ordinamento;
  • Come ultimo passo, possiamo invocare un web service per inviare le coppie di valori (Id Record e posizione) al server che provvederà a salvare il nuovo ordinamento.

  • Per quanto riguarda le modalità secondo cui possiamo esporre un web service a una pagina in modo che possa essere invocato tramite codice JavaScript, possiamo fare riferimento ai due articoli segnalati tra i riferimenti.

    Riferimenti:

    jQuery e ASP.NET: come realizzare applicazioni AJAX performanti
    https://www.aspitalia.com/articoli/asp.net/jquery-ajax.aspx
    Introduzione a Microsoft AJAX Library
    https://www.aspitalia.com/articoli/asp.net2/microsoft-ajax-library-p-2.aspx

Commenti

Visualizza/aggiungi commenti

Riordinare le righe di una GridView di ASP.NET con jQuery (#1104) 10 10 4
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi