Tabellen in CityDesk mit JavaScript erstellen

Leider bietet CityDesk 2 keine Unterstützung für Tabellen. Eine Möglichkeit, trotzdem nicht auf Tabellen verzichten zu müssen, besteht darin, Tabellen zunächst in einem externen HTML-Editor zu erstellen (z.B. Dreamweaver) und diese anschließend in einen CityDesk-Artikel zu kopieren.

Eine andere Möglichkeit besteht darin, Tabellen mit JavaScript erstellen zu lassen. Das folgende Script generiert Tabellen "on the fly" aus den Artikel-Daten. Die Pro's und Contra's werden im Folgenden beschrieben.

Das Vorteilhafte daran ist, dass sich - einmal aufgesetzt - extrem schnell damit arbeiten lässt und Sie CityDesk nicht verlassen müssen, um Ihre Daten zu erstellen.

Angenommen Sie möchten aus folgenden Daten eine Tabelle in CityDesk erstellen:

Erstellen Sie einen CityDesk-Artikel mit Namen "members", wechseln Sie in die HTML-Ansicht (keine Angst, Sie müssen kein HTML lernen, nur für die Dateneingabe) und geben Sie die Tabellendaten folgendermaßen ein:

• Trennzeichen für jeden Eintrag: "#"
• Trennzeichen für jede Zeile: "|\"

Klicken Sie auf "Save and Close". Kopieren Sie folgenden Code in eine CityDesk-Variable mit Namen "dynamicTable" (alternativ können Sie den Code auch direkt in Ihr Template schreiben) und fügen Sie die Variable {$.dynamicTable$} überall dort in Ihre Artikel ein, wo Sie die Tabelle auf Ihrer Webseite einfügen möchten. 

<script type="text/javascript">
<!--
var memberData = '{$include "members"$}';
var memberLines = memberData.split("|");
document.writeln('<table width="100%" cellpadding="4" cellspacing="0">');
document.writeln('<tr style="font-weight:bold;"><td>Name</td><td>Age</td><td>Color</td>');
document.writeln('<td>Car</td><td>Phone</td><td>ID</td><td>Email</td></tr>');
for (member=0; member<memberLines.length; ++member) {
var memberItem = memberLines[member].split("#");
document.writeln('<tr>');
document.writeln('<td>' + memberItem[0] + '</td>');
document.writeln('<td>' + memberItem[1] + '</td>');
document.writeln('<td>' + memberItem[2] + '</td>');
document.writeln('<td>' + memberItem[3] + '</td>');
document.writeln('<td>' + memberItem[4] + '</td>');
document.writeln('<td>' + memberItem[5] + '</td>');
document.writeln('<td>' + memberItem[6] + '</td>');
document.writeln('</tr>');
}
document.writeln('</table>');
//-->
</script>

Dieser Code generiert eine Tabelle wie oben beschrieben. Diese basiert auf dem Prinzip der Datenseparierung durch spezielle Zeichen ("#" und "|\") und generiert per JavaScript dynamischen HTML-Code.