FTUI JQuery für Tabellenzeilenkopien in Widgets

[dolittle]

Hi,
mich hat bei dem FB_CALLLIST widget genervt, dass in allen Beispielen unheimlich viel doppelter Code entsteht. Daher habe ich mir eine Lösung mit JQuery überlegt, wie man das vermeiden kann.

Die Grundidee ist, dass es immer eine Vorlagenzeile gibt, die das Layout und die Daten vorgibt. Per JQuery script werden dann aus dieser Vorlagenzeile identische Kopien erstellt, und nur die Datenbindings über data-get werden angepasst. Somit werden dann auch Designänderungen sehr einfach, weil man nur jeweils die Template Zeile anpassen muss und die Klone folgen dem.

Beispiel: HTML Fragment für FB_CALLList

Code Auswählen Erweitern

        <li data-row="4" data-col="2" data-sizex="4" data-sizey="1">
          <header class="headerTransparent">ANRUFE</header>
          <table class="" width="100%" name="anrufliste">
            <tbody>
              <tr id="templateRow" number="1" copies="5">
                <td>
                  <!-- Zuordnung des Status zu entsprechendem Icon -->
                  <div class="compressed small" data-type="symbol" data-device="Anrufliste"
                       data-get="1-state"
                       data-states='["=>","<=","=> X","<= X","=> ((o))","<= ((o))","=> [=]","<= [=]","=> O_O"]'
                       data-icons='["oa-phone_call_end_in","oa-phone_call_end_out","oa-phone_missed_in","oa-phone_missed_out","oa-phone_ring fa-blink","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_ring_out fa-spin","oa-phone_answersing"]'
                       data-colors='["blue","green","firebrick","orange","firebrick","firebrick","blue","green","#FAA460"]'></div>
                </td>
                <td>
                    <div data-type="label" data-device="Anrufliste" data-get="1-timestamp" data-part="5" class="inline"></div>
                </td>
                <td style="text-align:right;">
                    <div data-type="label" data-device="Anrufliste" data-get="1-timestamp" data-part="1" class="inline"></div>
                    <div data-type="label" data-device="Anrufliste" data-get="1-timestamp" data-part="2" class="inline"></div>
                    <div data-type="label" data-device="Anrufliste" data-get="1-timestamp" data-part="3" class="inline"></div>
                </td>
                <td style="text-align:right;">
                    <div data-type="label" data-device="Anrufliste" data-get="1-name" class="inline"></div>
                </td>
                <td style="text-align:right;">
                    <div data-type="label" data-device="Anrufliste" data-get="1-connection" class="inline"></div>
                </td>
                 <td style="text-align:right;">
                    <div data-type="label" data-device="Anrufliste" data-get="1-number" class="inline"></div>
                </td>
                <td>
                    <div data-type="label" data-device="Anrufliste" data-get="1-duration"></div>
                </td>
              </tr>
            </tbody>
          </table>
        </li>


Wichtig ist die Zeile <tr id="templateRow" number="1" copies="5">.

Über die Id "templateRow" wird die Zeile für das JQuery script als Vorlagenzeile identifiziert und der Wert in copies definiert nicht überraschend die Anzahl der Kopien.

Das Script unten macht eine Kopie der Vorlagenzeile, passt die Attribute der row und laufende Nummer der data-get Attribute an, die in der Vorlagenzeile mit "1-" beginnen. Es arbeitet ausschließlich mit der Vorlagenzeile, innerhalb der Tabelle und ändert sonst nichts an dem Dokument. Der Code ist recht einfach und sollte auch auf ähnliche Situationen anwendbar sein.

Code Auswählen Erweitern


<script>
$(document).ready(function() {
  var templateTr = $( "#templateRow" );
  var copies = $(templateTr).attr( "copies" );
  for ( i = 0 ; i < copies; i++ ) {
    var cloneTr = templateTr.clone();
    // remove template row meta attributes
    $(cloneTr[0]).attr("id",i+1+"-copiedRow");
    $(cloneTr[0]).attr("number",i+2);
    $(cloneTr[0]).removeAttr("copies");
    // adjust data-get attributes
    $(cloneTr).find('[data-get^="1-"]').each( function() {
        var newValue = $(this).attr("data-get").replace(/([\d]*)(-)([\w]*)/, i+2+"$2$3");
        $(this).attr("data-get",newValue);
    });
    // append cloned row
    $(cloneTr).appendTo( $(templateTr).closest('table') );
  }
});
</script>

Die echten Javascript Profis können das sicher noch kompakter, aber nachdem ich das nicht so oft mache, war mir Einfachheit und Lesbarkeit ein paar Zeilen mehr wert.

Es würde mich freuen, wenn Ihr das Schnipsel als hilfreich empfinden würdet.

Einen Guten Rutsch nach 2018