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

Hallo,

ich bastle mit Catalog gerade eine Tabelle mit zahlreichen Vergleichsmöglichkeiten = Spalten = Kriterien für mehrere Produkten.

Nun hätte ich gerne, dass der User auf der Website per Checkboxen die anzuzeigenden Spalten = "Vergleichs-Kriterien" in einer Vergleichstabelle selbst auswählen kann und dann die Tabelle mit zuvor den entsprechend gewählten Spalten neu ausgegeben wird. So kann er dann nach seinen Präferenzen die für ihn 5-6 wichtigsten Kriterien gegenüberstellen statt in einer für ihn überdimensionierten Tabelle herumzusuchen. Die Tabelle soll per Default immer ca. 7 Spalten vorhalten, 2 davon sind fix (die ersten beiden = Produkt und Position), die anderen 5 soll der User nach Belieben auswählen und generieren können.

D.h. in der Datenbank soll die per Catalog angelegte "Tabelle" viel mehr befüllte Spalten vorhalten, aber aus Platzgründen bei einem statischen Layout nur ein paar davon = nämlich die vom User ausgewählten Kriterien im Frontend als Tabelle ausgeben!

Grund ist, dass im Wrapper (bei 1spaltigem Layout) der Website in der Breite ja nur ein gewisser Platz für die Catalog-Tabelle möglich ist und so nicht mehr Spalten ausgegeben werden können als es z.B. für 940 px (minus je 10px margin zum rand) reicht.

Der User soll aber nach seinen Präferenzen aus Checkboxen (am besten direkt oberhalb der Tabelle) selbst auswählen können, welche Spalten samt Inhalten angezeigt werden sollen.

Ich hoffe ich hab mich einigermaßen klar ausgedrückt:)

Läßt sich sowas mit der Erweiterung Catalog realisieren oder ist da einiges an Umprogrammierung oder gar ein komplett neues Modul notwendig?


Edit: bin auch für alternative Lösungsvorschläge offen z.B. "versteckte" Spalten in den sichtbaren Bereich zu sliden o.ä. aber das scheint mir mindestens ähnlich komplex wie das andere....

Edit2: Ich weiß dass man im Catalog Filter = Checkboxen benutzen kann, dies ist aber was anderes als die von mir angestrebte Manipulation der angezeigten Spalten oder?

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

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.

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

Schön wenns so passt. :)

Zitat:

---

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