Spalten in einer Tabelle optional ausgeben bzw. auswählbar?

**Tim G** · 23.06.2011, 08:16

Hi,
sicher ist, mit Filtern gehts nicht, aber mit Template-Anpassung.

Ich nehme an, da du Tabellen benutzt, du benutzt eines der catalog templates, das Tabellen ausgibt - also nicht von vornherein an ganz eigenes Template.
Wie du bereits als Ansatz hattest es mit Checkboxes (z.B. über der Spalte) zu realisieren, wäre auch mein Ansatz.
Im Template wird innerhalb der foreach Schleife sämtliche Spalten gebildet (abhängig deiner sichtbaren Felder).
Du könntest jetzt das Template anpassen, das noch vor der ersten Spalte eine Checkbox mit einer indexierten Klasse ausgegben wird. sowas wie class="checkbox_ <?php echo $myCounter++; ?>"
Dann hättest du schonmal passende checkboxes zu den Spalten, die auch eine Nummer bekommen.

Dann kommt bissel javascript zum Einsatz. Mit mootools ist das sehr gut machbar.
Dort einfach gucken welche checkbox geklickt wurde, und per indexOf die passende Spalte entweder sichtbar, oder unsichtbar schalten.

Sollte klappen. bzw. fällt mir grad nichts anderes / leichteres / schnelleres ein.

Grüße Tim

**Tim G** · 23.06.2011, 09:44

Es ist doch etwas mehr tricky.
Mit Auszählen kommt man nicht all zu weit, da man innerhalb des Spalten-Arrays nicht weiss welcher Index (welche Spalten) zu welcher Checkbox gehören.
Der Einträge-Array-pro-Spalte ist (je nach Anzahl der Einträge) n-lang, aber Checkboxes gibt es nur so viele wie Tabellen-Spalten. Daher kann man nicht sagen "checkbox #2", blende Spalte 2 aus -> dann würde er nur den ersten Eintrag ausblenden, aber die zweite Zeile ignorieren, weil dort der index bereits weiter ist.

Long story short...
man geht über die Klassennamen, die eh vergeben werden pro Feld und schaut welchen Klassennamen hat die aktuell geklickte checkbox.
Damit sucht man sich aus dem Haufen Spalten diejenigen, die ebenfalls diesen Namen haben und blendet sie aus / bzw. ein.

Ich hängs dir mal an, da kannst du bissel gucken wie es gehen könnte. Viele Wege führen nach Rom

PHP-Code:

<?php if (count($this->entries)): ?>

<table class="layout_simpletable" summary="Catalog Items" cellspacing="0" cellpadding="0">
<thead class="header">

<!-- chechboxes -->
<tr class="checkbox_container">
<?php list($field, $heading) = each($this->entries); ?>
<?php foreach ($heading['data'] as $field=>$data): ?>
<?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
<th class="field <?php echo $field; ?>"><input type="checkbox" checked="checked" class="checkbox <?php echo $field; ?>"><?php echo $data['label']; ?></input></th>
<?php endif; ?>
<?php endforeach; ?>
</tr>

<tr class="label_container">
<?php list($field, $heading) = each($this->entries); ?>
<?php foreach ($heading['data'] as $field=>$data): ?>
<?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
<th class="field <?php echo $field; ?>"><?php echo $data['label']; ?></th>
<?php endif; ?>
<?php endforeach; ?>
</tr>

</thead>
<tbody class="body<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($this->entries as $entry): ?>
<tr class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
    <td class="field <?php echo $field; ?>"><?php if (strlen($data['value'])): ?>
<?php echo $data['value']; ?>

<?php endif; ?>
</td>
<?php endif; ?>
<?php endforeach; ?>
<?php if ($entry['showLink'] && $entry['link']):  ?>
<td class="link"><div class="link"><?php echo $entry['link']; ?></div></td>
<?php endif; ?>
<?php if ($entry['linkEdit']): ?>
<td class="edit"><div class="linkEdit"><?php echo $entry['linkEdit']; ?></div></td>
<?php endif; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>

<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>




<script type="text/javascript">
<!--//--><![CDATA[//><!-- 

/**
 * Blende Spalten aus, wenn Chechbox NICHT gedrueckt ist
 */
window.addEvent('domready', function() 
{
    var cols = $$('.mod_cataloglist .layout_simpletable tbody td');
    var checkboxes = $$('.mod_cataloglist .checkbox_container input');
    var colClasses = cols.get('class'); // store class names in an array
    
    var isChecked;
    var index;
    var boxClass;
    var thisCols = Array(); // store cols to hide / show
            
    // hide unchecked cols on page load
    checkboxes.each(function(item, index)
    {
        if (!item.get('checked'))
        {
            boxClass = item.get('class').replace('checkbox ', '');
            colClasses.each(function(item, index)
            {
                if (item.search(boxClass) != -1) thisCols.push(cols[index]);
            });
            
            
        }
    });
    
    thisCols.each(function(item, index)
    {
        //item.setStyles({display:'none'});
        item.fade('hide');
    });

    // Eventlistener
    checkboxes.addEvents({
        'click' : function()
        {
            index = checkboxes.indexOf(this);
            isChecked = this.get('checked'); // check if checkbox is selected / not
            boxClass = this.get('class').replace('checkbox ', ''); // strip down the class name to its single fieldname
            thisCols = Array();
            
            // loop through cols Array and find the cols containing the boxClass
            colClasses.each(function(item, index)
            {
                if (item.search(boxClass) != -1) thisCols.push(cols[index]);
            });
                        
            if(isChecked)
            {
                thisCols.each(function(item, index)
                {
                    //item.setStyles({display:'block'});
                    item.fade('in');
                });
            }
            else
            {
                thisCols.each(function(item, index)
                {
                    //item.setStyles({display:'none'});
                    item.fade('out');
                });
            }
        }
    });
});


//--><!]]>
</script>

Oben erstelle ich ein paar Checkboxes über dem table heads, die gleich gecheckt sind -> weil der user ja erstmal alles sehen soll
Die checkboxes kriegen als Klassennamen: checkbox <?php echo $field; ?>
=> checkbox meinFelderName

Unten kommt dann der javascript block, der genau das macht wie oben erklärt.

Theoretisch kannst du die Checkboxes überall platzieren. solange sie innerhalb der .mod_cataloglist klasse bleiben und als wrapper .checkbox_container kriegen. (das sind meine selectors für mootools) (kann man auch alles ändern. musst dann halt nur anpassen)

Viele Grüße,
Tim

ps. habs grad noch getuned:
Die ausgeblendeten Spalten sollten beim Seiten-Reload gleich ausgeblendet werden.
Und noch bissel fancy stuff rein, mit dem fade(); kannst du die Spalten schön smooth ausblenden lassen.
Falls du das nicht willst, einfach im mootools Teil die auskommentierten Teile mit dem setStyles nehmen und die fades dafür auskommentieren.

**murphyslaw** · 24.06.2011, 11:53

Hi Tim G

herzlichen Dank für die viele Mühe, die Du dir gemacht hast!

Ich war gestern wegen Feiertag offline, werde mir gleich alles anschauen!

Ich denke man sollte diese Funktionalität auf jedenfall fest in künftige Catalog-Updates einbauen, da die optionale Anzeige von Spalten via Checkboxen sicher für sehr viele Zwecke interessant ist und somit noch mehr Möglichkeiten mit Catalog geschaffen werden können.

Catalog ist ohnehin eines der variabelsten Extensions neben dem erweiterten Formeleditor EFG :thumbup:.

**Tim G** · 24.06.2011, 12:54

Schön wenns so passt.

Ich denke man sollte diese Funktionalität auf jedenfall fest in künftige Catalog-Updates einbauen, da die optionale Anzeige von Spalten via Checkboxen sicher für sehr viele Zwecke interessant ist und somit noch mehr Möglichkeiten mit Catalog geschaffen werden können.

- ich denke via template reicht das völlig. Sonst müsste eine php-Variante her und da sehe ich andere Dinge, die eine höhere Priorität haben.

- vielleicht ein Sammelsurium an Templates mal starten. Sind ja hier doch so einige in Threads versteckt, die immer wiederkehrende Fragen beantworten würden.
Wäre auch im Wiki gut aufgehoben.
(jaja, ich weiss. ich sollte selbst damit anfangen)

Grüße,
Tim

Spalten in einer Tabelle optional ausgeben bzw. auswählbar?

Spalten in einer Tabelle optional ausgeben bzw. auswählbar?

Kommentar

Kommentar

Kommentar

Kommentar