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.