Code & Blog Logo

Die Tabellenansicht unseres CMS wird heute nochmal optimiert. Es geht ob die Checkboxen und neue Aktionen. Außerdem gibt es heute eine kleine Premiere bei der Aktion – Wir setzten zum ersten Mal JavaScript ein (soweit ich noch weiß^^). Der ganze Tag dreht sich um die Datei /admin/include/table-show.php

Fangen wir mal mit den Aktionen an. Hier wir das Löschen und Bearbeiten von Einträgen ermöglicht. An dieser Stelle gibt es erstmal nur die Links + Icons (Im unteren Code hat sich noch ein bisschen mehr geändert, worauf ich erst später eingehe):

<?PHP
      $res = mysql_query("SELECT * FROM ".mysql_real_escape_string($_GET['table'])." LIMIT 0,30");
      $pos = 0;
      while($row = mysql_fetch_assoc($res)){
        ?>
        <tr onClick="check(<?PHP echo $pos; ?>)">
          <td>
            <input type="checkbox" id="check-<?php echo $pos; ?>" name="entries" value="<?PHP echo $pos; ?>" />
          </td>
          <td>
            <a title="Bearbeiten"
               href="index.php?page=tableitem-edit&table=<?PHP echo $_GET['table']."&position=".$pos; ?>">

              <img src="/system/images/icons/page_edit.png" />

            </a>
            <a title="L&ouml;schen"
               href="index.php?page=tableitem-delete&table=<?PHP echo $_GET['table']."&position=".$pos; ?>">
              <img src="/system/images/icons/cross.png" />

            </a>
          </td>
      <?PHP
        foreach($columns as $column){
          echo "<td>".substr(htmlentities($row[$column['Field']]),0,30)."</td>";
        }
        echo "</tr>";
        $pos++;
      }
    ?>

Weiter oben kommt dann noch die Spalte Aktionen hinzu:

<table class="dbtable">
  <thead>
    <tr>
       <td><input id="checkall" type="checkbox" onClick="checkAll()" /></td>
       <td>Aktionen</td>

Damit sind die Aktionen soweit erstmal fertig. Kommen wir nun zum schwierigeren Teil: Die Checkboxen. Hier soll es zum einen möglich sein, auf eine Zeile zu klicken und sie dadurch auszuwählen, oder eben nicht mehr auswählen. Zum anderen soll die Checkbox im Header alle Zeilen (de)selektieren. Da es wegen Array schwierig ist in JS Elemente mit Klammern anzusteuern, habe ich aus unseren entries[] entries gemacht (siehe oben).

Mit dem onClick auf dem tr wird die JavaScript Funktion check ausgeführt, als Parameter wird die Position übergeben. Bei der Checkbox, die alle Einträge auswählen soll(checkall), wird die Funktion checkAll aufgerufen.

Die Funktion check setzt einfach den Checked-Wert genau anders als er vorher war(mit dem ‘!’ den Wert einfach umdrehen). Die Funktion checkAll geht alle Elemente des neuen Formulars table durch und setzt dort den Status genau so, wie den von der Checkbox checkall.

Hier ist der komplette Code, dank technischer (WordPress) Probleme mal ganz hässlich in schwarz-weiß und ohne Eitnrückungen:

<h1>Tabelle <?PHP echo $_GET['table']; ?></h1>
<?PHP
$columns = MySQL::getColumns($_GET['table']);
if($columns){
?>
<script language=”JavaScript”>
function check(pos){
document.getElementById(‘check-’ + pos).checked = !document.getElementById(‘check-’ + pos).checked;
}
function checkAll(){
for (i = 0; i < document.table.entries.length; i++){
document.table.entries[i].checked = document.getElementById(‘checkall’).checked;
}
}
</script>
<form name=”table”>
<table>
<thead>
<tr>
<td><input id=”checkall” type=”checkbox” onClick=”checkAll()” /></td>
<td>Aktionen</td>
<?PHP
foreach($columns as $column){
echo “<td>”.htmlentities($column['Field']).”</td>”;
}
?>
</tr>
</thead>
<tbody>
<?PHP
$res = mysql_query(“SELECT * FROM “.mysql_real_escape_string($_GET['table']).” LIMIT 0,30″);
$pos = 0;
while($row = mysql_fetch_assoc($res)){
?>
<tr onClick=”check(<?PHP echo $pos; ?>)”>
<td>
<input type=”checkbox” id=”check-<?php echo $pos; ?>” name=”entries” value=”<?PHP echo $pos; ?>” />
</td>
<td>
<a title=”Bearbeiten”
href=”index.php?page=tableitem-edit&table=<?PHP echo $_GET['table'].”&position=”.$pos; ?>”>

<img src=”/system/images/icons/page_edit.png” />

</a>
<a title=”L&ouml;schen”
href=”index.php?page=tableitem-delete&table=<?PHP echo $_GET['table'].”&position=”.$pos; ?>”>
<img src=”/system/images/icons/cross.png” />

</a>
</td>
<?PHP
foreach($columns as $column){
echo “<td>”.substr(htmlentities($row[$column['Field']]),0,30).”</td>”;
}
echo “</tr>”;
$pos++;
}
?>
</tbody>
</table>
</form>
<?PHP
}
else{
echo “<p>Tabelle wurde nicht gefunden</p>”;
}
?>