it-swarm.com.de

Benutzerdefinierte Tabellenanzeige - Verwandeln Sie statisches HTML in dynamisches PHP

Ich versuche, die Listenansicht meiner Joomla-Komponente zu ändern, um die Daten meiner Tabelle benutzerfreundlicher anzuzeigen. Derzeit werden einfach alle Daten in einer regulären Tabelle mit Spalten und Zeilen angezeigt, z. B .: Current database list view

Ich möchte jedoch, dass die Daten teilweise im Titel und teilweise in einem Dropdown-Menü angezeigt werden. Ich habe ein Beispiel für das Format gemacht, für das ich am jsfiddle fotografiere.

Die Sache ist, ich bin neu in PHP und ich bin nicht sicher, wie ich meinen statischen HTML-Code in dynamischen PHP Code umwandeln soll. Ich möchte, dass jede Zeile angezeigt wird seine Daten mit einem unabhängig funktionierenden Dropdown-Menü (die Klickereignisse sind derzeit miteinander verknüpft.) Außerdem möchte ich, dass jede Zeile eine eigene "Anzeigeleuchte" hat, die anzeigt, wie voll jedes Klassenzimmer auf der eigenen basiert cap und att Werte.

Wenn ich einen Beispielcode sehen könnte, wäre dies sehr hilfreich. Ich muss jedes Sitzungsmenü dynamisch füllen und die Statusanzeige mithilfe von Javascript dynamisch ändern. Es ist einfach ein zu großer nächster Schritt, um mich auf einmal zu besinnen.

Ich gehe davon aus, dass ich meine Zeilen in ein Listenformat setzen, die Liste dynamisch mit PHP ausfüllen und dann irgendwie eine Schleife in meinem Javascript durchlaufen muss, die att/ cap aufruft Werte für jede Zeile und Ändern der entsprechenden CSS-Werte für ul .sessions li: n-th-child (x) .css ('background', 'red');

Hier ist der Code für meine aktuelle Tabellendarstellung, falls es hilfreich ist:

    <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>

Jeder Einblick wird geschätzt. Vielen Dank!

2
Nathanael

Die jQuery-Funktion wurde für alle Elemente mit der zugewiesenen Zielklasse ausgeführt. Das Ergebnis war, dass alle Dropdowns gleichzeitig geöffnet wurden. Die Lösung bestand darin, jedem Dropdown-Element eine eindeutige ID zuzuweisen und die jQuery-Funktion zu verwenden, um die zugewiesene Ziel-ID mit $ (this) zu öffnen. Beispiel für den jQuery-Code für das Dropdown-Menü unten.

//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; ?>

Hier ist die jQuery-Funktion zum Bearbeiten des Elements über eine Klassendeklaration und eine eindeutige ID

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

Das Tag kann auch durch ein span-Tag im dropbtn ersetzt werden, damit es mit CSS formatiert werden kann. Wenn die href durch eine span ersetzt wird, können Sie die e.preventDefault () -Linie aus der click-Funktion entfernen.

Ich bin froh, dass meine Antwort dir geholfen hat, alles herauszufinden.

2
Terry Carter