Ecco un altro componente che manca a Twitter Bootstrap: lo switch button.

In pratica parliamo di quelo bottone che corrisponde al classico On|Off.

Possiamo facilmente rimediare usando un plugin di terze parti che trovate qui: Bootstrap Switch.

Prima di tutto scaricate i file e includeteli nella vostra pagina:

<link href="bootstrap-switch.min.css" rel="stylesheet">
<script src="bootstrap-switch.min.js"></script>

In più articoli ho menzionato a come fare per selezionare tutte le checkbox di un form contemporanemante usando Javascript.

Oggi vi spiego come fare.

Prima di tutto guardatevi questo esempio:

<?php
echo '<table id="example" class="display"><thead>';
echo '<th><a href="javascript:selectAll();">Select All</a></th>';
echo '<th>NOME</th>';
echo '<th>COGNOME</th>';
echo '<th>EMAIL</th>';
echo '<th>DATA DI REGISTRAZIONE</th>';
echo '<th>DATA DI NASCITA</th>';
echo '<th>NOTE</th>';
echo '<th></th></thead>';
echo '<tfoot>';
echo '<th><a href="javascript:selectAll();">Select All</a></th>';
echo '<th>NOME</th>';
echo '<th>COGNOME</th>';
echo '<th>EMAIL</th>';
echo '<th>DATA DI REGISTRAZIONE</th>';
echo '<th>DATA DI NASCITA</th>';
echo '<th>NOTE</th>';
echo '<th></th></tfoot>';
foreach (showUtenti() as $row) {
echo '<tr><td><input type="checkbox" name="check[]" value="' . $row['utente_email'] . '" /></td>';
echo '<td>' . $row['utente_nome'] . '</td>';
echo '<td>' . $row['utente_cognome'] . '</td>';
echo '<td>' . $row['utente_email'] . '</td>';
echo '<td>' . $row['utente_reg'] . '</td>';
echo '<td>' . $row['utente_data'] . '</td>';
echo '<td>' . $row['note'] . '</td>';
}
echo '</table>';
?>
</form>

Questo scriptino PHP estrapola i dati da un db eseguendo una query con la funzione showUtenti(), e mette i dati in tabella.

Tempo fa scrissi un articolo per far vedere com'era possibile integrare le CheckBox in una GridView.

Ovviamente possiamo volerle selezionare/deselezionare tutte in una botta.

Questo è possibile farlo abbastanza agilmente in Javascript; ma è possibile farlo anche in C#.

Vediamo come fare; supponendo di trovarci dentro una pagina Asp.NET con una GridView del genere:

<asp:Button ID="selectAll" runat="server" Text="Seleziona tutti" OnClick="btn_selectAll" />
<asp:Button ID="deselectAll" runat="server" Text="Deseleziona tutti" OnClick="btn_deselectAll" />
<asp:GridView ID="DecoderView" runat="server" DataKeyNames="sito#" DataSourceID="objDecoder"
AllowPaging="True" AllowSorting="True" AutoGenerateSelectButton="True" PageSize="5"
AutoGenerateColumns="False" CssClass="grid">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="SelectedItem" AutoPostBack="true" runat="server" OnCheckedChanged="btn_check" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="sito#" HeaderText="sito#" SortExpression="sito#" InsertVisible="False" />
<asp:BoundField DataField="localita" HeaderText="localita" SortExpression="localita" />
<asp:BoundField DataField="descrizione" HeaderText="descrizione" SortExpression="descrizione" />
<asp:BoundField DataField="IP" HeaderText="IP" SortExpression="IP" />
<asp:BoundField DataField="riserva" HeaderText="riserva" SortExpression="riserva" />
<asp:BoundField DataField="Expr2" HeaderText="gruppo#" SortExpression="Expr2" />
<asp:BoundField DataField="Expr1" HeaderText="tipo_deploy#" SortExpression="Expr1" />
<asp:BoundField DataField="versione" HeaderText="versione" SortExpression="versione" />
<asp:BoundField DataField="versione_itl" HeaderText="versione_itl" SortExpression="versione_itl" />
<asp:BoundField DataField="ultimo_avvio" HeaderText="ultimo_avvio" SortExpression="ultimo_avvio" />
<asp:BoundField DataField="app_disk_space" HeaderText="app_disk_space" SortExpression="app_disk_space" />
<asp:BoundField DataField="TGU" HeaderText="TGU" SortExpression="TGU" />
<asp:BoundField DataField="ip_voyager" HeaderText="ip_voyager" SortExpression="ip_voyager" />
</Columns>
</asp:GridView>

Come vedete sopra la GV ci sono due pulsanti che richiamano due eventi nel code-behind:

Per cancellare dei file con PHP basterebbe la funzione unlink().

Facciamo allora dierttamente un passo e vediamo come sia possibile cancellare più insieme.

Supponiamo di avere una pagina che carica tutte le immagini di una determinata cartella.

Nel link postato possiamo vedere come fare a caricare automaticamente le immagini.

Partendo da quello. e apportando qualche modifica, arriviamo a una cosa del genere:

<table>
    <form action="" method="post" enctype="multipart/form-data" name="form_elimina">
        <tr>
            <td>
            </td>
            <td>
                <input type="submit" value="Elimina" name="elimina_img" />
            </td>
        </tr>
        <?php
        $dirname = "../gallery";
        $images = scandir($dirname);
        sort($images);
        foreach ($images as $file) {
            if ((substr($file, -5) == ".jpeg") || (substr($file, -4) == ".jpg") || (substr($file, -5) == ".JPEG") || (substr($file, -4) == ".JPG") || (substr($file, -4) == ".png")) {
                echo <<<HTML
<tr>
<td>
<input type="checkbox" name="check[]" value="$file" />
</td>
<td>
<img src="../gallery/$file" alt="" oncontextmenu="return false;" style="border: 1px solid black;" />
</td>
</tr>
HTML;
            }
        }
        ?>
    </form>
</table>

Abbiamo intabellato la pagina e aggiunto un form e una checkbox.

Il controllo server GridView è uno dei controlli più utilizzati nella creazione di pagine create in Asp.NET.

Visual Studio offre, poi, tante opzioni di personalizzazione così che è abbastanza facile imparare ad usare una GridView in poco tempo.

Però di default la GV è solo una "girglia" che rappresenta i dati in righe e colonne con molte più opzioni rispetto a una classica tabella.

Non offre ad esempio la possibilità di aggiungere DropDownList o CheckBox, a meno che non lo si fa a mano.

Nella guida vi spiego appunto come inserire una colonna CheckBox dentro a una GV.

Do per scontato che abbiate configurato la vostra GV; dovete fare però attenzione a impostare su false il parametro AutoGenerateColumns (che è condigliato a prescindere dall'argomento trattato).

Le colonne andranno inserite a mano dentro al tag <Columns>.

Dentro al suddetto tag andremmo a modificare il template attraverso TemplateField, che rappresenta un campo con contenuto personalizzato.

TemplateField permette di modificare diversi template a seconda dell'operazione che dobbiamo fare; noi useremo ItemTemplate imposta il modello per visualizzare un elemento in un controllo con associazione a dati.