affichage de tableau personnalisé - aide à convertir le code HTML statique en PHP dynamique
J'essaie de modifier la vue en liste de mon composant Joomla pour afficher les données de ma table de manière plus conviviale. Actuellement, il affiche simplement toutes les données dans un tableau régulier avec des colonnes et des lignes, comme par exemple: 
Mais je veux que les données s'affichent en partie dans le titre, en partie dans un menu déroulant. J'ai fait un exemple du format que je cherche pour le jsfiddle .
Le fait est que je suis nouveau sur PHP et je ne sais pas comment transformer mon code HTML statique en code dynamique PHP. Je souhaite que chaque ligne soit affichée). ses données avec un menu déroulant fonctionnant indépendamment (les événements de clic sont actuellement liés entre eux). De plus, je veux que chaque ligne ait son propre "voyant" qui indique à quel point chaque classe est pleine en fonction de celle de cette ligne cap et att valeurs.
Si je pouvais voir un exemple de code, ce serait très utile. J'ai besoin de remplir dynamiquement chaque menu de session et de changer dynamiquement l'indicateur d'état à l'aide de javascript. Il s’agit simplement d’une étape trop importante pour que je puisse réfléchir à tout cela en même temps.
Je suppose que je dois mettre mes lignes dans un format de liste, remplir la liste de manière dynamique en utilisant PHP, puis effectuer une itération dans une boucle de mon javascript, en appelant le att / plafonner les valeurs pour chaque ligne et modifier les valeurs css respectives pour ul .sessions li: nth- child (x) .css ('arrière-plan', 'rouge');
Voici le code de mon tableau actuel, au cas où cela serait utile:
<table class="table table-striped" id="sessionList">
<thead>
<tr>
<?php if (isset($this->items[0]->state)): ?>
<th width="5%">
<?php echo JHtml::_('grid.sort', 'JPUBLISHED', 'a.state', $listDirn, $listOrder); ?>
</th>
<?php endif; ?>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_ID', 'a.id', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_DATE', 'a.date', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_TIME', 'a.time', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_TITLE', 'a.title', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_TEACHER', 'a.teacher', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_LVL', 'a.lvl', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_NOTES', 'a.notes', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_JR', 'a.jr', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_CAP', 'a.cap', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_ATT', 'a.att', $listDirn, $listOrder); ?>
</th>
<th class=''>
<?php echo JHtml::_('grid.sort', 'COM_MERAKIAC_SESSIONS_SID', 'a.sid', $listDirn, $listOrder); ?>
</th>
<?php if ($canEdit || $canDelete): ?>
<th class="center">
<?php echo JText::_('COM_MERAKIAC_SESSIONS_ACTIONS'); ?>
</th>
<?php endif; ?>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="<?php echo isset($this->items[0]) ? count(get_object_vars($this->items[0])) : 10; ?>">
<?php echo $this->pagination->getListFooter(); ?>
</td>
</tr>
</tfoot>
<tbody>
<?php foreach ($this->items as $i => $item) : ?>
<?php $canEdit = $user->authorise('core.edit', 'com_merakiac'); ?>
<?php if (!$canEdit && $user->authorise('core.edit.own', 'com_merakiac')): ?>
<?php $canEdit = JFactory::getUser()->id == $item->created_by; ?>
<?php endif; ?>
<tr class="row<?php echo $i % 2; ?>">
<?php if (isset($this->items[0]->state)) : ?>
<?php $class = ($canChange) ? 'active' : 'disabled'; ?>
<td class="center">
<a class="btn btn-micro <?php echo $class; ?>" href="<?php echo ($canChange) ? JRoute::_('index.php?option=com_merakiac&task=session.publish&id=' . $item->id . '&state=' . (($item->state + 1) % 2), false, 2) : '#'; ?>">
<?php if ($item->state == 1): ?>
<i class="icon-publish"></i>
<?php else: ?>
<i class="icon-unpublish"></i>
<?php endif; ?>
</a>
</td>
<?php endif; ?>
<td>
<?php echo $item->id; ?>
</td>
<td>
<?php echo $item->date; ?>
</td>
<td>
<?php if (isset($item->checked_out) && $item->checked_out) : ?>
<?php echo JHtml::_('jgrid.checkedout', $i, $item->uEditor, $item->checked_out_time, 'sessions.', $canCheckin); ?>
<?php endif; ?>
<a href="<?php echo JRoute::_('index.php?option=com_merakiac&view=session&id='.(int) $item->id); ?>">
<?php echo $this->escape($item->time); ?></a>
</td>
<td>
<?php echo $item->title; ?>
</td>
<td>
<?php echo $item->teacher; ?>
</td>
<td>
<?php echo $item->lvl; ?>
</td>
<td>
<?php echo $item->notes; ?>
</td>
<td>
<?php echo $item->jr; ?>
</td>
<td>
<?php echo $item->cap; ?>
</td>
<td>
<?php echo $item->att; ?>
</td>
<td>
<?php echo $item->sid; ?>
</td>
<?php if ($canEdit || $canDelete): ?>
<td class="center">
<?php if ($canEdit): ?>
<a href="<?php echo JRoute::_('index.php?option=com_merakiac&task=sessionform.edit&id=' . $item->id, false, 2); ?>" class="btn btn-mini" type="button"><i class="icon-edit" ></i></a>
<?php endif; ?>
<?php if ($canDelete): ?>
<a href="<?php echo JRoute::_('index.php?option=com_merakiac&task=sessionform.remove&id=' . $item->id, false, 2); ?>" class="btn btn-mini delete-button" type="button"><i class="icon-trash" ></i></a>
<?php endif; ?>
</td>
<?php endif; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Toute idée est appréciée. Merci!
La fonction jQuery fonctionnait contre tous les éléments de la classe cible assignée. Le résultat a été que toutes les listes déroulantes s'ouvraient simultanément. La solution consistait à attribuer un ID unique à chacun des éléments de la liste déroulante et à utiliser la fonction jQuery pour ouvrir l'ID affecté aux cibles à l'aide de $ (this). Exemple de code jQuery pour la liste déroulante ci-dessous.
//PHP LOOP FOR EACH ITEM
<?php foreach ($this->items as $i => $item) : ?>
<div class="topb">
<div class="sessind"></div>
<div class="fll"><?php echo $item->time; ?></div>
<div class="fll"><?php echo $item->title; ?></div>
<div class="dropbtn" data-id="<?php echo $i; ?>"><a>open</a></div>
</div>
<div class="moredta" id="data_<?php echo $i; ?>">
<div class="leftc">
<p><b>teacher:</b> <?php echo $item->teacher; ?></p></div>
<div class="rightc">
<p><b>level:</b> <?php echo $item->lvl; ?></p></div>
<div class="notes">
<p><b>notes:</b> <?php echo $item->notes; ?></p></div>
</div>
<?php endforeach; ?>
Voici la fonction jQuery pour manipuler l'élément via une déclaration de classe et un identifiant unique
$(document).ready(function(){
$(".dropbtn").on("click",function(e){
var dataid = $(this).data("id");
$(this).text(function(i, text){
return text === "open" ? "close" : "open";
})
$(this).toggleClass('active');
$("#data_"+dataid).slideToggle('fast');
e.preventDefault();
});
var att = 4,
cap = 5;
if(att === cap){
$(".sessind").css('background','red'),
$(".dropbtn").off("click"),
$(".dropbtn a").text("full");
}else if(att >= cap - 2 && att != cap){
$(".sessind").css('background','yellow');
}else if(att < cap - 2){
$(".sessind").css('background','Lime');
}
});
La balise peut également être remplacée par une balise span dans le dropbtn afin qu’elle puisse être stylée avec CSS. Si la href est remplacée par une étendue, vous pouvez supprimer la ligne e.preventDefault () de la fonction click.
Heureux ma réponse vous a aidé à tout comprendre.