✔ Tree Table - Text bei "expand" ausblenden

Jacka

Jacka

Erfahrenes Mitglied
Hallo zusammen,

ich nutze für ein Zeiterfassungs-Tool ein Tree Table nach Vorlage von jrobbins
http://sstree.tigris.org/nonav/example4.html.

Unter der Kategorie "Projects" finden sich die Projekte mit ihren Unteraufgaben. Dort können die Zeiten eingegeben werden.
Jetzt versuche ich verzeifelt unterzubringen, dass nur wenn ein Projekt komplett zusammengeklappt ist, die Gesamtzeit in der Zeile angezeigt wird.
Andernfalls soll es ausgeblendet werden. Mein Versuch der Zeile eine andere CSS-Klasse zuzuweißen wenn "collapsed" scheiterte am Internet Explorer..

Ich habe das mal in einem Bild versucht zu verdeutlichen.
Am Montag wurde nur eine Stunde sichtbar gebucht, die Gesamtzeit beträgt aber, wie unten aufgeführt, 2 Stunden. Die zweite Stunde steht im Project A. Leider kann man das nicht sehen. Bei zwei Projekten ist das noch nicht schlimm, aber meist hat man 5-20 Projekte dort stehen. Außerdem fehlen neben Projects noch 3 weitere Kategorien...

Hat jemand von euch vielleicht eine Idee, wie ich das umsetzten könnte?
Die Werte in die Zeile zu bekommen ist kein Problem, nur das "collapsed" = anzeigen und "expand" = nicht anzeigen, ist knifflig. :confused:

Hier der JS-Code:
PHP: 
function toggleRows(elm) {
 var rows = document.getElementsByTagName("tr");
 elm.style.backgroundImage = "url(../js/ext2/docs/resources/pkg-closed.gif)";
 var newDisplay = "none";
 var thisID = elm.parentNode.parentNode.parentNode.id + "-";
 
 // Are we expanding or contracting? If the first child is hidden, we expand
  for (var i = 0; i < rows.length; i++) {
   var r = rows[i];
   if (matchStart(r.id, thisID, true)) {
    if (r.style.display == "none") {
     if (document.all) {
	 	newDisplay = "block"; //IE4+ specific code
	 }
	 else {
		newDisplay = "table-row"; //Netscape and Mozilla
	 }
     elm.style.backgroundImage = "url(../js/ext2/docs/resources/pkg-open.gif)";
    }
    break;
   }
 }

 // When expanding, only expand one level.  Collapse all desendants.
 var matchDirectChildrenOnly = (newDisplay != "none");
 for (var j = 0; j < rows.length; j++) {
   var s = rows[j];
   if (matchStart(s.id, thisID, matchDirectChildrenOnly)) {
     s.style.display = newDisplay; // Hier wird der Style gewechselt!
     var cell = s.getElementsByTagName("TD")[0];
     var tier = cell.getElementsByTagName("DIV")[0];
     var folderTime = tier.getElementsByTagName("A")[0];
     if (folderTime.getAttribute("onclick") != null) {
      folderTime.style.backgroundImage = "url(../js/ext2/docs/resources/pkg-closed.gif)";
     }
   }
 }
}

function matchStart(target, pattern, matchDirectChildrenOnly) {
 var pos = target.indexOf(pattern);
 if (pos != 0) return false;
 if (!matchDirectChildrenOnly) return true;
 if (target.slice(pos + pattern.length, target.length).indexOf("-") >= 0) return false;
 return true;
}

function collapseAllRows() {
 var rows = document.getElementsByTagName("TR");
 for (var j = 0; j < rows.length; j++) {
   var r = rows[j];
   if (r.id.indexOf("-") >= 0) {
     r.style.display = "none";
   }
 }
}

Und der HTML-Teil:
PHP: 
 <table class="cl1">
 <tbody class="mitHover">
 <tr id="1" class="b">
  <td class="r1c2">
  	<div class="tier1"><a href="#" onclick="toggleRows(this)" class="folderTime">&nbsp;</a>PROJECTS (2 items)</div>
  </td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
  <td class="r1c4"></td>
 </tr>
<tr id="1-1" class="a">
    <td><div class="tier2"><a href="#" onclick="toggleRows(this)" class="folderTime">&nbsp;</a>Project A</div></td>
    <td><span id="Sum-Mon-Proj-175" class="projSum" name="projSum"></span></td>
    <td><span id="Sum-Tue-Proj-175" class="projSum" name="projSum"></span></td>
    <td><span id="Sum-Wen-Proj-175" class="projSum" name="projSum"></span></td>
    <td><span id="Sum-Thu-Proj-175" class="projSum" name="projSum"></span></td>
    <td><span id="Sum-Fri-Proj-175" class="projSum" name="projSum"></span></td>
    <td><span id="Sum-Sat-Proj-175" class="projSum" name="projSum"></span></td>
    <td><span></span></td>
    <td><input type="checkbox" value="1" id="check-Proj-175-0" class="check" checked="checked" onclick="displTask(this)" /></td>
</tr>
<tr id="1-1-1" class="c" title="General Task eg. for Administration">  
     <td><div class="tier3"><a href="#" class="doc">&nbsp;</a>General</div></td>
     <td><input type="text" value="0" id="Mon-Proj-175" name="Mon" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Tue-Proj-175" name="Tue" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Wen-Proj-175" name="Wen" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Thu-Proj-175" name="Thu" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Fri-Proj-175" name="Fri" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Sat-Proj-175" name="Sat" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td class="total"><b id="sum-Proj-175">0</b></td>
     <td></td>
</tr>

<tr id="1-2" class="a">
     <td><div class="tier2"><a href="#" onclick="toggleRows(this)" class="folderTime">&nbsp;</a>Project B </div></td>
     <td><span id="Sum-Mon-Proj-174" class="projSum" name="projSum"></span></td>
     <td><span id="Sum-Tue-Proj-174" class="projSum" name="projSum"></span></td>
     <td><span id="Sum-Wen-Proj-174" class="projSum" name="projSum"></span></td>
     <td><span id="Sum-Thu-Proj-174" class="projSum" name="projSum"></span></td>
     <td><span id="Sum-Fri-Proj-174" class="projSum" name="projSum"></span></td>
     <td><span id="Sum-Sat-Proj-174" class="projSum" name="projSum"></span></td>
     <td><span></span></td>
     <td><input type="checkbox" value="1" id="check-Proj-174-0" class="check" checked="checked" onclick="displTask(this)" /></td>
</tr>
<tr id="1-2-1" class="c" title="General Task eg. for Administration">
     <td><div class="tier3"><a href="#" class="doc">&nbsp;</a>General</div></td>
     <td><input type="text" value="0" id="Mon-Proj-175" name="Mon" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Tue-Proj-175" name="Tue" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Wen-Proj-175" name="Wen" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Thu-Proj-175" name="Thu" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Fri-Proj-175" name="Fri" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Sat-Proj-175" name="Sat" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td class="total"><b id="sum-Proj-175">0</b></td>
     <td></td>
</tr>
<tr id="1-2-2" class="c" title="All analytical work e.g. MS, HPLC">
     <td><div class="tier3"><a href="#" class="doc">&nbsp;</a>Analytics</div></td>
     <td><input type="text" value="0" id="Mon-Proj-175-1" name="Mon" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Tue-Proj-175-1" name="Tue" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Wen-Proj-175-1" name="Wen" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Thu-Proj-175-1" name="Thu" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Fri-Proj-175-1" name="Fri" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td><input type="text" value="0" id="Sat-Proj-175-1" name="Sat" onchange="Aendern(this)" onfocus="this.select()" /></td>
     <td class="total"><b id="sum-Proj-175">0</b></td>
     <td><input type="checkbox" value="1" id="check-Proj-175-1" class="check" checked="checked" onclick="displTask(this)" /></td>
</tr>

</tbody>
</table>


Sorry, für die Codelänge! :-(

Vielen Dank und Grüße,
Jacka
 

Anhänge

  • timesheet.jpg
    timesheet.jpg
    38,5 KB · Aufrufe: 124
Zuletzt bearbeitet:
Moin Jacka,

Jacka hat gesagt.:
Mein Versuch der Zeile eine andere CSS-Klasse zuzuweißen wenn "collapsed" scheiterte am Internet Explorer..
Zum Vergrößern anklicken....

wie genau hast du es denn probiert?
der IE hat ein Problem mit dieser Vorgehensweise:
Code: 
[object].setAttribute('class','Klassenname');

jenes kann er aber eiggentlich gut, und andere Browser auch:
Code: 
[object].className='Klassenname';
 
:eek:

Sven Mintel hat gesagt.:
jenes kann er aber eiggentlich gut, und andere Browser auch:
Code: 
[object].className='Klassenname';
Zum Vergrößern anklicken....

Das gibt es doch nicht! Ich bin mir sicher beide Versionen ausprobiert zu haben. Ich bastle dort schon seit Wochen immer mal wieder dran...

Es funktioniert mit der folgenden Codeerweiterung und zwei CSS-Klassen hide und show.

PHP: 
...

 var thisID2 = elm.parentNode.parentNode.parentNode;

     if(newDisplay != "none") {
         thisID2.className = thisID2.className + ' hide';
     }
     else {
         thisID2.className = thisID2.className + 'show';
     }
...


Vielen Dank und Grüße,
Jacka
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück