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

di , 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
    http://www.aspitalia.com/articoli/asp.net/jquery-ajax.aspx
    Introduzione a Microsoft AJAX Library
    http://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) 1010 4
| Condividi su: Twitter, Facebook, LinkedIn, Google+

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