Hallo an alle,
es freut mich, meine Weiterentwicklung der "Tabelle dynamisch" vorstellen zu dürfen.
Die neue Version habe ich jetzt "DynTable" getauft.
Hat noch kleinere Bugs und es existieren 2-3 unnötige Funktionen, die für meinen Kunden gedacht waren, hab aber wenig Lust und Zeit gehabt, diese jetzt zu entfernen.
Naja, es stört auch nicht sonderlich.
In der nächsten Version entferne ich dann alle unnötigen Funktionen und behebe die letzten Bugs.
Basiert auf der Version von Ulrich Zdebel (http://www.redaxo.de/165-Moduldetails.h ... ule_id=287)
Da sich soviele Änderungen ergeben haben, und ich fast alles komplett neu strukturiert habe, setzte ich die Version von 0.2 auf 1.0 Beta an.
Neue Funktionen:
- Neue Zelle kann an beliebiger Stelle eingefügt werden.
- Zellen können nach oben und unten verschoben werden.
- Zellen können an beliebiger Stelle eingefügt und entfernt werden
(nicht wie in der alten Version immer nur die letzte)
- Textile-Formatierung in jeder Zelle möglich (bold, kursiv, links)
Bis auf ein paar kleine Mängel funktioniert alles bestens.
Eingabe:
Code: Alles auswählen
<style type="text/css">
#tableImgs {
float: left;
width: 40px;
margin-bottom: 5px;
margin-top: 5px;
}
</style>
<?
$rexname = split("~~","REX_VALUE[1]");
$GLOBALS['rexname'] = $rexname;
/**
* --------------------------------------------------------------------
*
* Redaxo Modul: DynTable
*
* Version: 1.0, 12.09.08 (Copyright 2008 Hirbod - www.softloop.net, Ulrich Zdebel, uzdebel@web.de)
*
* Basiert auf der Version von Ulrich Zdebel, uzdebel@web.de (Version 0.2)
* Reloaded Version 1.0 by Hirbod (softloop.net) / REX 4.1 kompatibel und um mehrere wichtige Features erweitert
*
* --------------------------------------------------------------------
* - Neu:
*
* - REX 4.0 / 4.1 portiert
* - Zellen können an beliebiger Stelle eingefügt oder entfernt werden
* - Zellen können beliebig verschoben werden
* - Die 99 Zellen Begrenzung ist raus, aber noch unsauber gelöst. Es wird dran gearbeitet
* - rexname überarbeitet und genügt als "presave"-aktion
* - Viele Bugs entfernt und den Code etwas bereinigt
*
*/
/**
* -----------------------------------------------------------------------------
* Aktionen für das Modul setzen:
* rexname [PRE|ADD|EDIT]
*
*
* OPTIONEN:
*
* $maxSize:
* Maximal zulässige Breite "eines" Inputfeldes, wenn sich dieses über
* den zulässigen Bildschirmbereich erstrecken würde.
*
* $headline:
* Mögliche Tabellenüberschrift
*
* $colChooserAllowed:
* true:eingeschaltet; false:ausgeschaltet
* Anzeigeoption für Selectelement zur Einstellung der Tabellenspalten
*
* $maxColChooserValues:
* Maximal einstellbare Anzahl an Spalten
*
* $colChooserInfo:
* true: einschalten; false: ausschalten
* Einschalten des Infotextes wie die Spaltenzahl verändert wird.
*
* $maxCols:
* Ist aktiv, wenn $colChooserAllowed=false; ist !
* Voreinstellung der maximalen Anzahl an Spalten.
*
* $tableIdChooserAllowed:
* Schaltet das Inputfeld zur Eingabe der Tabel id ein / aus
* Für $tableIdChooserAllowed=false wird stets table id="dyntable" gesetzt !
* ------------------------------------------------------------------------------
*/
// OPTIONEN
$maxSize = 120;
$headline = '';
$colChooserAllowed = true;
$maxColChooserValues = 100;
$maxCols = 100;
$colChooserInfo = true;
$tableIdChooserAllowed = true;
$colChooserInfo=true;
if($maxColChooserValues<=1)
{
$colChooserAllowed = false;
$colChooserInfo=false;
}
if(!$colChooserAllowed) $rexname[1] = $maxCols;
if(!isset($rexname[1]) OR ($rexname[1]==''))
{
$rexname[1] = 1;
$sizeArr = array($maxSize);
} else {
$size = floor($maxSize / $rexname[1]);
for($i=0;$i<$rexname[1];$i++) $sizeArr[] = $size;
}
$tableID = (isset($rexname[3])&&($rexname[3]!=''))?$rexname[3]:'dyntable';
?>
<?
$jsSizeArr = "new Array('".implode("','",$sizeArr)."')";
$script=<<<EOD
<script language="javascript">
function numRows(table_id) {
var rows = document.getElementById(table_id).getElementsByTagName('tr');
return rows.length;
}
function numCols(table_id) {
var cols = document.getElementById(table_id).getElementsByTagName('input');
return cols.length;
}
function createInput(pRow, pCellNum, psize )
{
var row_value = '';
var cell = pRow.insertCell(pCellNum);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('value', row_value);
el.setAttribute('name', '');
el.setAttribute('size', psize);
cell.appendChild(el);
}
function addRow(r, table_id){
if (!document.getElementById || !document.createElement || !document.createTextNode)
{
alert ("Ihr Browser unterst&tzt die Funktion leider nicht !"); return;
}
var rowIndex;
if(r)
rowIndex = r.parentNode.parentNode.rowIndex + 1;
else
rowIndex = numRows(table_id);
//alert(rowIndex);
var sizeArr = $jsSizeArr;
var table = document.getElementById(table_id);
var lastRow = numRows(table_id);
var rowNum = lastRow+1;
var lastCol = numCols(table_id);
var colCount = lastCol / lastRow;
if (--- == "MacPPC")
{
rowIndex = rowIndex * 2;
}
var row = table.insertRow(rowIndex);
for(var i=0;i<colCount;i++) createInput(row, i, sizeArr[i]);
createButtons(row, table_id);
setRowColHidden(rowNum, colCount);
updateRexname(table_id);
}
function setRowColHidden( rowNum, colCount )
{
document.getElementById('REX_FORM').elements['rexname[0]'].value = rowNum + ':' + colCount;
}
function createButtons(row, table_id)
{
var cell = row.insertCell(0);
cell.innerHTML = '<a href="#row" onclick="addRow(this, \'' + table_id + '\')";><img src="./media/file_add.gif" /></a>' +
'<a href="#row" onclick="moveUp(this, \'' + table_id + '\')";><img src="./media/file_up.gif" /></a>' +
'<a href="#row" onclick="deleteRow(this, \'' + table_id + '\')";><img src="./media/file_del.gif" /></a>' +
'<a href="#row" onclick="moveDown(this, \'' + table_id + '\')";><img src="./media/file_down.gif" /></a>';
}
function moveUp(link, table_id){
var row = link.parentNode.parentNode;
if (0 == row.rowIndex) {
alert('Die erste Zeile kann nicht weiter nach oben verschoben werden!');
} else {
var prevRow = row.previousSibling;
row.parentNode.removeChild(row);
prevRow.parentNode.insertBefore(row, prevRow);
updateRexname(table_id);
}
}
function moveDown(link, table_id){
var row = link.parentNode.parentNode;
if (numRows(table_id) == row.rowIndex + 1) {
alert('Die letze Zeile kann nicht weiter nach unten verschoben werden!');
} else {
var nextRow = row.nextSibling;
row.parentNode.removeChild(nextRow);
row.parentNode.insertBefore(nextRow, row);
updateRexname(table_id);
}
}
function setCol(p)
{
var rowcol = document.getElementById('REX_FORM').elements['rexname[0]'].value;
var rowcol = document.REX_FORM.elements['rexname[0]'].value;
var rowcolArr = rowcol.split(":");
document.getElementById('REX_FORM').elements['rexname[0]'].value = rowcolArr[0] + ':' + p;
}
function deleteRow(r, table_id)
{
var i;
if(r)
i = r.parentNode.parentNode.rowIndex;
else
i = numRows(table_id)-1;
if (i == 0) {
alert('Die erste Zeile kann nicht gelöscht werden');
} else {
document.getElementById(table_id).deleteRow(i);
var lastCol = numCols(table_id);
lastRow = numRows(table_id);
var colCount = lastCol / lastRow;
setRowColHidden( lastRow, colCount );
updateRexname(table_id);
}
}
function updateRexname(table_id)
{
var inputWert = document.getElementById(table_id).getElementsByTagName('input');
for (var k = 0; k < inputWert.length; k++)
{
inputWert[k].name = "rexname[" + (k+4) + "]";
}
}
function setHdl()
{
var hdlValue = document.REX_FORM.elements['rexname[2]'].value;
if(hdlValue==1)
{
document.REX_FORM.elements['rexname[2]'].value=0;
} else {
document.REX_FORM.elements['rexname[2]'].value=1;
}
}
</script>
EOD;
// Script im Backend einfügen
if(!$REX['GG']) echo $script;
?>
<? echo $headline; ?>
<?
/**
* -----------------------------------------------------------------------------
* Vorgabe der Tabellenkonstruktion mit 1 Zeile
* -----------------------------------------------------------------------------
*/
?>
<?
$rexname_col = (isset($rexname[1])&&($rexname[1]!=''))?$rexname[1]:1;
$table_id = 'tabelle';
$colChooser = true;
// Jetzt generieren wir die erste Spalte mit X Cols, falls noch keine zusätzlichen Spalten angelegt wurden
if( isset($rexname[0]) && ($rexname[0]==''))
{
$colChooser=true;
$rexname_rowcol = '1:'.$rexname[1];
$table = '<table id="'.$table_id.'">';
$table .= '<tr>';
$k=4;
for($i=0;$i<$rexname_col;$i++)
{
$rexname_value = isset($rexname[$k])?$rexname[$k]:'';
$table .= '<td><input type="text" name="rexname['.($k).']" value="'.$rexname_value.'" size="'.$sizeArr[$i].'" /></td>';
$k++;
}
$table .= '</tr>';
$table .= '</table>';
}
// Ende
?>
<?
/**
* -----------------------------------------------------------------------------
* Jetzt werden die restlich angelegten Felder dynamisch generiert
* -----------------------------------------------------------------------------*/
if( isset($rexname[0])&& ereg(':',$rexname[0]) )
{
list($rows, $cols) = split(':',$rexname[0]);
$colChooser = ($rows==1)?true:false;
$rexname_rowcol = ( isset($rexname[0]) && ($rexname[0]!='') ) ? $rows.':'.$rexname_col : '1:'.$rexname_col;
$table = '<table id="'.$table_id.'">';
$k=4;
for($i=0;$i<$rows;$i++)
{
$table .= '<tr><td id="tableImgs">
<a href="#row" onclick="addRow(this, \''.$table_id.'\')";><img src="./media/file_add.gif" /></a>
<a href="#row" onclick="moveUp(this, \''.$table_id.'\')";><img src="./media/file_up.gif" /></a>
<a href="#row" onclick="deleteRow(this, \''.$table_id.'\')";><img src="./media/file_del.gif" /></a>
<a href="#row" onclick="moveDown(this, \''.$table_id.'\')";><img src="./media/file_down.gif" /></a>
</td> ';
for($j=0;$j<$cols;$j++)
{
$rexname_value = (isset( $rexname[$k] ) ) ? $rexname[$k] : '';
$table .= '<td><input type="text" name="rexname['.$k.']" value="'.$rexname_value.'" size="'.$sizeArr[$j].'" /></td>';
$k++;
}
$table .= '</tr>';
}
$table .= '</table>';
}
?>
<?=$table;?>
<input name="rexname[0]" type="hidden" value="<?=$rexname_rowcol;?>" />
<input name="rexname[1]" type="hidden" value="<?=$rexname_col;?>" />
<input name="rexname[2]" type="hidden" value="<?=$rexname[2];?>" />
<br />
<a name="row"></a>
<fieldset style="color:#ff0000">
<a href="#row" onClick="addRow(null, '<?=$table_id;?>')"><img src="./media/file_add.gif" /></a>
<a href="#row" onClick="deleteRow(null, '<?=$table_id;?>')"><img src="./media/file_del.gif" /></a><br />
</fieldset>
<br />
<fieldset>
<legend>Spaltenanzahl</legend>
<select name="rexname[1]" onchange="setCol( this[selectedIndex].value ); document.getElementById('REX_FORM').update.value=1; submit();">
<?
foreach( range(1,$maxColChooserValues) as $value) {
echo '<option value="'.$value.'"';
if ( $rexname[1]=="$value" ) {
echo 'selected="selected" ';
}
echo '>'.$value.'</option>';
}
?>
</select>
</fieldset>
<br /><br />
<fieldset>
<legend>Zeile 1 als Tabellenüberschrift (th) auszeichen?</legend>
<div style="float:left;">
Ja <input type="radio" name="rexname[2]" value="1" <? if ($rexname[2] == '1') echo 'checked'; ?> /> | Nein <input type="radio" name="rexname[2]" value="0" <? if ($rexname[2] == '0') echo 'checked'; ?> /></div>
</fieldset>
<br /><br />
<fieldset>
<legend>noHover aktivieren? (nur wenn Zeile 1 Darstellungsprobleme beim Hovern hat)</legend>
<div style="float:left;">
Ja <input type="radio" name="VALUE[5]" value="1" <? if ("REX_VALUE[5]" == '1') echo 'checked'; ?> /> | Nein <input type="radio" name="VALUE[5]" value="0" <? if ("REX_VALUE[5]" == '0') echo 'checked'; ?> /></div>
</fieldset>
<br /><br />
<?if($tableIdChooserAllowed):?>
<fieldset>
<legend>
Der Tabelle eine Klasse vergeben (class=).<br />
Keine Eingabe = dyntable
</legend>
<input type="text" name="rexname[3]" value="<?=(isset($rexname[3])&&($rexname[3]!=''))?$rexname[3]:'dyntable';?>">
</fieldset>
<br />
<?endif;?>
<? if($colChooserInfo) { ?>
<fieldset>
<legend>Information</legend>
- Textile-Formatierung kann in jeder Zelle angewandt werden.<br />
- Bei veränderter Spaltenanzahl bitte <strong>zwei mal</strong>, "Block übernehmen" betätigen.<br />
</fieldset>
<? } ?>
</table>
Code: Alles auswählen
<? $rexname = split("~~","REX_VALUE[1]");
$GLOBALS['rexname'] = $rexname; ?>
<?
$styleInfoVisible = true;
?>
<?
$table_id = ( isset($rexname[3]) && ($rexname[3]!='') )?$rexname[3]:'dyntable';
if( isset($rexname[0])&&(ereg(':',$rexname[0])) )
{
list($rows,$cols) = split(':', $rexname[0]);
$k=4;
$c=0;
if ("REX_VALUE[5]" == "1")
{
$activeNoHover = $this->getValue('article_id');
}
$tdStyleArr = array();
$thStyleArr = array();
$table = '<table class="'.$table_id.'">';
for($i=0;$i<$rows;$i++)
{
if ($i == 0 or $i == 1 && $this->getValue('article_id') != $activeNoHover)
{
$table .= '<tr class="noHover">';
} else {
$table .= '<tr>';
}
$tdi=1;
for($j=0;$j<$cols;$j++)
{
$c.=($rexname[$k]!='')?1:0;
$rexname[$k] = str_replace(""", "\"", $rexname[$k]);
$rexname[$k] = str_replace("<", "<", $rexname[$k]);
$rexname[$k] = str_replace(">", ">", $rexname[$k]);
if (empty($rexname[$k]))
{
$rexname[$k] = " ";
}
// Inputfelder mit Textile formatieren (php-code nicht eingerückt, weil das sonst EOT-Fehler verursacht.)
$input =<<<EOT
$rexname[$k]
EOT;
$textile = new Textile;
if ("$rexname[$k]" != "")
$rexname[$k] = $textile->TextileThis($input);
$rexname[$k] = str_replace("###"," ",$rexname[$k]);
// die erste Zeile als Tabellenüberschrift
if( isset($rexname[2]) && ($rexname[2]==1) && ($i==0) ) {
$table .= '<th class="th'.$tdi.'">'.$rexname[$k].'</th>';
#$thStyleArr[] = '#dyntable .th'.$tdi;
$thStyleArr[] = '#'.$table_id.' .th'.$tdi;
$k++; $tdi++;
} else {
//$pos1 = stripos($rexname[$k], ".2008");
//echo $pos1;
//if ($pos1 != false) continue;
$table .= '<td class="td'.$tdi.'">'.$rexname[$k].'</td>';
#$tdStyleArr[] = '#dyntable .td'.$tdi;
$tdStyleArr[] = '#'.$table_id.' .td'.$tdi;
$k++; $tdi++;
}
}
$table .= '</tr>';
}
$table .= '</table>';
// Nur Backendformatierung
if(!$REX['REDAXO'])
{
echo <<<EOD
<style type="text/css">
$tableStyle
$thStyleStr
$tdStyleStr
</style>
EOD;
}
// Nur Backend
if(!$REX['REDAXO']) {
if($c>0) echo $table; else {
echo '<fieldset><legend>Info</legend>';
echo 'Sämtliche Tabellenzellen sind leer !';
echo '</fieldset>';
}
}
// Nur Frontend
if($REX['REDAXO']) {
if($c>0) echo '<!-- colsplit -->'.$table;
}
// StyleInfo: Nur Backend
if((!$REX['REDAXO'])&&($styleInfoVisible)) {
echo '<br /><br />';
$info = '<fieldset>';
$info .= '<legend>Styleangaben</legend>';
$info .= 'Die Anzeige der Styleangaben wird in der Backendausgabe dieses Moduls abgeschaltet durch: $styleInfoVisible = false;';
$info .= '<br /><br />';
$info .= '<b>Tabelle:</b><br />id="'.$table_id.'"<br />';
// CSS Tabellenüberschrift
if(count($thStyleArr)>0) {
$info .= '<br />';
$info .= '<b>Überschrift:</b>';
$info .= '<br />';
$tdi=1;
for($j=0; $j<$cols; $j++) {
$info .= $tdi.'.Spalte: class="th'.$tdi.'"' . '<br />'; $tdi++;
}
$info .= '<br /><b>Andere Zellen:</b><br />';
} else $info .= '<br /><b>Zellen:</b><br />';
// CSS andere Zellen
$tdi=1;
for($j=0; $j<$cols; $j++) {
$info .= $tdi.'.Spalte: class="td'.$tdi.'"' . '<br />'; $tdi++;
}
$info .= '</fieldset>';
}
}
unset($tdStyleArr);
unset($thStyleArr);
?>
Code: Alles auswählen
<?php
$newname = "";
for ( $c = 0; $c < 9999; $c++ )
{
if (isset($rexname[$c]))
{
//$rexname[$c] = str_replace("\\\"", "\"", $rexname[$c]);
$rexname[$c] = stripslashes($rexname[$c]);
$newname .= $rexname[$c] . '~~';
} else {
$newname .= '~~';
}
}
$REX_ACTION['VALUE'][1] = $newname;
?>
Ich hoffe, das euch dieses innovative Modul hilft.
Gruß
Hirbod
P.S: Hier noch ein Screenshot
[ externes Bild ]