web-dev-qa-db-fra.com

Rendre les champs répétables en ligne

Est-ce que quelqu'un connaît un moyen simple de rendre les champs répétables en ligne plutôt que de s'afficher dans un mode modal?

Cela semble idiot d'ajouter tout ce contenu supplémentaire et de ne pas avoir un moyen simple de voir ce que vous ajoutez, sauf si vous cliquez sur un bouton de la page.

Ce serait génial de modifier ce code pour que l'option apparaisse sur la page.

Cordialement John

form-fields-types
3
John Rama

Pour ce faire, vous devrez ajouter le code suivant au pied de page de votre fichier edit.php dans le dossier de la vue.

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);
    }
});

Le code JavaScript suivant peut être ajouté à tout fichier JavaScript également chargé sur cette page.

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);
}

Ensuite, pour vous assurer que la table est construite lors du chargement de la page après avoir enregistré l'élément, ajoutez également ce JavaScript.

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');
    }
});

Dans ce dernier petit extrait de code, vous devez vous rappeler de remplacer mes identifiants de champs par ceux de votre choix.

J'ai supposé que vous restiez dans l'API Joomla et ses conventions pour créer votre champ répétable. Si vous avez personnalisé quelque chose que ce soit, vous devrez adapter ce code à ces modifications personnalisées.

J'espère que cela t'aides!

1
Llewellyn