it-swarm.com.de

Wie erstelle ich eine Tabelle mit den wiederholbaren Feldwerten direkt unter der Schaltfläche, die das Modal öffnet?

Ich möchte die Werte in meinem wiederholbaren Feld sehen, bevor ich es im Modal öffne. Direkt unter dem Button, der das Modal öffnet.

Sobald ich es dann öffne und Änderungen vornehme, sollten sich diese Änderungen auch sofort in der Tabelle widerspiegeln.

2
Llewellyn

Um dies zu tun, müssen Sie den folgenden Code in die Fußzeile Ihrer edit.php-Datei im Ansichtsordner einfügen.

jQuery('input.form-field-repeatable').on('weready', function(e, value){
    jQuery('.save-modal-data').text('Done');
}).on('value-update', function(e, value){
    if (value)
    {
        buildTable(value,e.currentTarget.id);
    }
});

Das folgende JavaScript kann zu jeder JavaScript-Datei hinzugefügt werden, die ebenfalls auf dieser Seite geladen wird.

function buildTable(array,id){
    jQuery('#table_'+id).remove();
    jQuery('#'+id).closest('.control-group').append('<table style="margin: 5px 0 20px;" class="table" id="table_'+id+'">');
    jQuery('#table_'+id).append(tableHeader(array));
    jQuery('#table_'+id).append(tableBody(array));  
    jQuery('#table_'+id).append('</table>');
}

function tableHeader(array)
{
  var header = '<thead><tr>';
    jQuery.each(array, function(key, value) {
         header += '<th style="padding: 10px; text-align: center; border: 1px solid rgb(221, 221, 221);">'+capitalizeFirstLetter(key)+'</th>';
    });
    header += '</tr></thead>';
  return header;
}

function tableBody(array)
{
    var body = '<tbody>';
    var rows = new Array();
    jQuery.each(array, function(key, value) {
        jQuery.each(value, function(i, line) {
      if( rows[i] === undefined ) {
        rows[i] = '<td style="padding: 10px; text-align: center; border: 1px solid rgb(221, 221, 221);">' + line + '</td>';
      }
      else
      {
        rows[i] = rows[i] + '<td style="padding: 10px; text-align: center; border: 1px solid rgb(221, 221, 221);">' + line + '</td>';
      }
        });
    });
  // now load to body the rows
  jQuery.each(rows, function(a, row) {
     body += '<tr>' + row + '</tr>';
    });

    body += '</tbody>';

  return body;

}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
} 

Fügen Sie auch dieses JavaScript hinzu, um sicherzustellen, dass die Tabelle beim Laden der Seite erstellt wird, nachdem Sie das Element gespeichert haben.

jQuery(document).ready(function()
{
    // set up table for this repeatable field
    var values_a = jQuery('#jform_percentmale').val();
    if (values_a)
    {
        values_a = jQuery.parseJSON(values_a);
        buildTable(values_a,'jform_percentmale');
    }

    // set up table for this repeatable field
    var values_b = jQuery('#jform_percentfemale').val();
    if (values_b)
    {
        values_b = jQuery.parseJSON(values_b);
        buildTable(values_b,'jform_percentfemale');
    }
});

In diesem letzten kleinen Codefragment sollten Sie daran denken, meine Feld-IDs durch Ihre eigenen zu ersetzen.

Ich bin davon ausgegangen, dass Sie bei der Erstellung Ihres wiederholbaren Feldes innerhalb der Joomla-API und ihrer Konventionen bleiben. Wenn Sie Dinge in irgendeiner Weise angepasst haben, müssen Sie diesen Code an die von Ihnen vorgenommenen benutzerdefinierten Änderungen anpassen.

Hier habe ich eine Demo-Komponente auf GitHub , die diese Implementierung hat. Schauen Sie sich auch JavaScript und andere zugehörige Skripte an.

Hoffe das hilft jemandem :)

2
Llewellyn