Questions & Answers

[HenningHausenbe]

Hallo,

ich möchte in einem DOM-Editor unterschiedliche Arten von Tabellen zur Verfügung stellen.

Z.B. soll es eine Tabelle nach dem Muster

<table>

     <thead>

          <tr>

               <th></th>

               <th></th>

               <th></th>

          </tr>

     </thead>

     <tbody>

          <tr>

               <td></td>

               <td></td>

               <td></td>

          </tr>

     </tbody>

</table>

und eine weitere Tabelle nach dem Muster

<table>

     <tbody>

          <tr>

               <td></td>

               <td></td>

               <td></td>

          </tr>

     </tbody>

</table>

Über die Stilvorlage kann ich den Redakteur auswählen lassen ob die Zelle ein th oder ein td sein soll. Aber ich habe keine Position gefunden, wo ich abfragen kann, ob es sich um eine Tabelle mit Kopfzeile handeln soll oder nicht.

Meine Ideen waren

1) Ein Formular auf Tabellen- oder Tabellenzeilenebene

2) Zugriff auf eine Eigenschaft in der ersten Zelle von der Tabellenzeile aus

3) Eine weitere Tabellenvorlage, die andere Formatvorlagen für tr verwendet

Leider hat keine der Varianten zum Erfolg geführt. Gibt es eine andere Möglichkeit, die ich übersehen habe. Oder muss ich dann auf ein CMS_INPUT_DOMTABLE ausweichen?

[marza]

Hallo Henning,

vielleicht hilft Dir folgende Seite im ODFS weiter:

Mittels #style und #cell kannst Du die Logik in der Formatvorlage des TD-Tags entsprechend anpassen (zu finden im SiteArchitect unter dem TemplateStore / Formatvorlagen /common_format_templates /td -> hier den HTML-Channel auswählen).

Meines Erachtens müsste Dein Vorhaben möglich sein. Mit #cell.FirstRow kannst Du ggf. auch zwischen THs und TDs wechseln.

Grüße Marian

[pavone]

Hallo Henning,

benötigst Du noch weitere Hilfe oder haben Dir Marians Antwort bereits geholfen? In diesem Fall wäre es super, wenn Du die "richtige Antwort" entsprechend markierst, damit auch andere Community-Teilnehmer diese auf den ersten Blick finden. Solltest Du zwischenzeitlich eine eigene Lösung gefunden haben, wäre es nett, wenn Du diese hier bereitstellst.

Viele Grüße

Tim

[HenningHausenbe]

Hallo,

danke für die Antwort. Die beiden Objekte #style und #cell waren mir schon bekannt. Leider reichen diese nicht für die gewünschte Individualisierung aus.

Die Tabelle soll ein thead-Element enthalten, wenn die erste Reihe aus th-Elementen besteht.

Und es sollen, abhängig vom Aufbau der Tabelle, verschiedene Klassen gesetzt werden.

Ich habe es nun wie folgt gelöst:

In der Standard-Stilvorlage die Möglichkeit eine Zelle als Kopf- oder Datenzelle zu definieren

  <CMS_INPUT_RADIOBUTTON name="cellType" gridHeight="1" gridWidth="2" hFill="yes" useLanguages="no">

    <ENTRIES>

      <ENTRY value="data">

        <LANGINFOS>

          <LANGINFO lang="*" label="Daten"/>

        </LANGINFOS>

      </ENTRY>

      <ENTRY value="head">

        <LANGINFOS>

          <LANGINFO lang="*" label="Kopf"/>

        </LANGINFOS>

      </ENTRY>

    </ENTRIES>

    <LANGINFOS>

      <LANGINFO lang="*" label="Zellentyp"/>

    </LANGINFOS>

  </CMS_INPUT_RADIOBUTTON>

Auf Zellenebene die Option prüfen und entsprechend ein th oder td setzen

$CMS_SET(set_tag, if(#cell.attr("cellType").equals("head"), "th", "td"))$

<$CMS_VALUE(set_tag)$$--

    --$$CMS_IF(!#cell.attr("dataAttribute").isEmpty())$ data-th="$CMS_VALUE(#cell.attr("dataAttribute"))$"$CMS_END_IF$$--

    --$$CMS_VALUE(if(#cell.rowspan > 1, " rowspan='" + #cell.rowspan + "'"))$$--

    --$$CMS_VALUE(if(#cell.colspan > 1, " colspan='" + #cell.colspan + "'"))$>$--

    --$$CMS_IF(!#cell.attr("cellType").equals("head"))$<span>$CMS_END_IF$$--

    --$$CMS_VALUE(if(#content.isEmpty, " ", #content))$$--

    --$$CMS_IF(!#cell.attr("cellType").equals("head"))$</span>$CMS_END_IF$$--

--$</$CMS_VALUE(set_tag)$>

Auf Zeilenebene das content-Objekt auslesen und prüfen ob die erste tr eine Kopfzeile ist und ggf. eine thead ausgeben

$CMS_IF(#tr.firstRow)$

    $CMS_SET(set_hasHeadRow, false)$

    $CMS_SET(set_content)$

        $CMS_TRIM(level:4)$

            $CMS_VALUE(#content.toString())$

        $CMS_END_TRIM$   

    $CMS_END_SET$   

    $CMS_SET(set_firstPosition, set_content.toString().indexOf("<th>"))$       

    $CMS_SET(set_lastPosition, set_content.toString().lastIndexOf("<th>"))$   

    $CMS_IF(set_firstPosition != set_lastPosition)$

        $CMS_SET(set_hasHeadRow, true)$

    $CMS_END_IF$

$CMS_END_IF$

$CMS_IF(#tr.firstRow)$

    $CMS_IF(set_hasHeadRow)$

        <thead>

    $CMS_END_IF$

$CMS_END_IF$   

<tr>$CMS_VALUE(#content)$</tr>

$CMS_IF(#tr.firstRow)$

    $CMS_IF(set_hasHeadRow)$

        </thead>

    $CMS_END_IF$

$CMS_END_IF$   

Auf Tabellenebene über das #content-Objekt prüfen ob ein thead vorhanden ist

$--Checks if table has a headrow--$

$CMS_SET(set_hasHeadRow)$$--

    --$$CMS_VALUE(#content.toString().contains("<thead>"))$$--

--$$CMS_END_SET$

$--Checks if table has only two cols--$

$CMS_SET(set_rowStart, #content.toString().indexOf("<tr>"))$

$CMS_SET(set_rowEnd, #content.toString().indexOf("</tr>"))$   

$CMS_SET(set_rowContent, #content.toString()[set_rowStart..set_rowEnd])$

$CMS_IF(set_hasHeadRow)$$--

    --$$CMS_SET(set_indexOfFirstCol, set_rowContent.toString().indexOf("<th>"))$$--

    --$$CMS_SET(set_indexOfSecondCol, set_rowContent.toString().indexOf("<th>", set_indexOfFirstCol+3))$$--

    --$$CMS_SET(set_indexOfThirdCol, set_rowContent.toString().indexOf("<th>", set_indexOfSecondCol+3))$$--

--$$CMS_ELSE$$--

    --$$CMS_SET(set_indexOfFirstCol, set_rowContent.toString().indexOf("<th>"))$$--

    --$$CMS_SET(set_indexOfSecondCol, set_rowContent.toString().indexOf("<td>", set_indexOfFirstCol+3))$$--

    --$$CMS_SET(set_indexOfThirdCol, set_rowContent.toString().indexOf("<td>", set_indexOfSecondCol+3))$$--

--$$CMS_END_IF$

    <div class=" $CMS_IF(set_hasHeadRow)$mit-Kopfzeile$CMS_ELSIF(set_indexOfThirdCol == -1)$nur-zwei-spalten$CMS_END_IF$">

        <table>$CMS_VALUE(#content)$</table>

    </div>