Aktionen & Checkbox Tabellenansicht (CMS)

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ö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=“#8220;index.php?page=tableitem-edit&table=<?PHP echo $_GET[‚table‘].“&position=“.$pos; ?>“>

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

</a>
<a title=“Lö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>“;
}
?>

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Daniel Busch schrieb am 27.09.2009:

Naja, beim tinymce hatten wir schon mal JS ;-)

Stefan Wienströer schrieb am 27.09.2009:

Hast Recht^^

Daniel Busch schrieb am 27.09.2009:

Im Plaintextteil (sch... Wort). Also in dem Teil der durch technische (Wordpress) Probleme unformatiert im Blog steht, hat der table-tag kein class-Atribut mehr. Ergo die style-Angaben fruchten nicht mehr. Da wird sich aber jeder Copyundpaster (noch sone Wortschöpfung) ärgern. schönes Restwochenende Daniel

Tobi schrieb am 29.09.2009:

Ich weiß nicht wie es bei euch ist aber ich habe jetzt das Problem, das wenn ich eine Zeile anklicke dann wird die checkbox markiert, doch wenn ich die Checkbox direkt anklicke wird es durch das js für die row direkt wieder invertiert.

Stefan Wienströer schrieb am 29.09.2009:

Werd ich mir mal ansehen, hab danach auch nichtmehr das direkte anklicken getestet, aber es kann gut sein. Ich werd dann wahrscheinlich nen Bugfix-Beitrag drüber veröffentlichen

Renner schrieb am 10.10.2009:

Ok ich versuch es hier mal mit meinem kommentar weil iwie kann ich keine schreiben oder ich seh sie selber nicht. ich würde bei den ganzen icons wo du einfügst noch ein border="0" anfügen damit der hässliche blaue rahmen weg ist! ;)

Stefan Wienströer schrieb am 11.10.2009:

Hmm ich hab keine Border, aber ich denke der IE wird sie haben. Am besten lässt sich das glaub ich über CSS lösen, dann müssen wir nicht jedes einzelne Icon bearbeiten.

Stefan Wienströer schrieb am 11.10.2009:

Ich hab jetzt rausgefunden, warum du keine Kommentare schreiben konntest: Mein Anti-Spam filter hat angeschlagen, weil Du so oft hintereinander Kommentare geschrieben hast^^ Werd die Kommentare mal durchsehen, und die die keine Testkommentare sind / die, die du nicht schon wo anders genannt hast freischalten.

erxxlu schrieb am 06.04.2010:

irgendwie kann ich nach dem einbau des JS die kästchen nicht mehr auf checked setzen nur die checkbox welche alle invertiert funktioniert noch 1A... woran könnte das liegen ?

erxxlu schrieb am 06.04.2010:

Und hier ist der Bugfix dazu: Bugfix Tabellenansicht: Checkbox nicht Checkbar

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project