Veröffentlicht 10. August 200520 j hi zusammen, ich baue grad nen dynamischen baum, der seine inhalte aus ner mysql-db zieht. das problem: ich möchte an jedes element ne checkbox mit nem wert haben, den ich aus php übergebe, jedoch hab ich nicht soviel js-erfahrung um das zu bewerkstelligen... // Creates the node icon, url and text dTree.prototype.node = function(node, nodeId, title) { //alert(title); var str = '<div class="dTreeNode">' + this.indent(node, nodeId); if (this.config.useIcons) { if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; if (this.root.id == node.pid) { node.icon = this.icon.root; node.iconOpen = this.icon.root; } str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" /><td valign=middle><input type=checkbox id="'+title+'" onclick = alert('+title+')></td>'; also der hier geschriebene "title" is der wert den ich übergeben will. also falls mal ein js-bewanderter von euch zeit hat wär ich sehr dankbar, das gesamte grundskript ist hier zu finden: http://www.destroydrop.com/javascripts/tree/dtree.zip denke es werden fragen aufkommen vielen dank schonma Odec
10. August 200520 j wow, geiler code, genau so mag ich das auch, richtig schwer zu lesen, yeah! :cool:
11. August 200520 j irgendwie ist Pseudo-Objektorientier Code in JS ziemlich hässlich. hmm...ich weis nicht ganz was du eigentlich tun willst, kann hier ger ade nicht in den Gesamtcode reingugen. "Titel" ist ja eine JS Variable die von 'Irgendwo' Übergeben wird, da musst du nachgugen wie du die Datenquelle aus php her füllst. Entweder die Datenquelle ist ein Aufruf in HTML-befehle, oder ein Javascript-Array. Beides ließe sich dynamisch mit PHP generieren.
11. August 200520 j danke schonma für reaktionen, also ich rufe in rekursiven php-funktionen dynamisch die add-funktion von js auf, dort übergebe ich id,parentid,namen, url und title diese werden ja normal als parameter der addfunktion übergeben, jedoch blicke ich nich so ganz durch den code durch, ich will den title ja im endeffekt nur als parameter an die js-interne: dTree.prototype.node = function(node, nodeId, title <--) übergeben, jedoch geht das vorher durch: dTree.prototype.addNode = function(pNode) und davor: dTree.prototype.toString = function() das problem is , ich kann den code da nich ganz nachvollziehen... danke, Odec
11. August 200520 j hast du "ungefähr" ahnung von Objektorientierung ? "dTree.prototype.node = function(node, nodeId, title)" ist nur die definition. Wenn irgendwo im Quelltext steht DTree.prototype.node("a","b","c"); dann ist das ein aufruf an die funktion. A ist die Node, b die Nodeid und c der Titel. dtree.prototype.tostring() führt ebenfalls zu einer funktion, nur eben ohne Parameter. kann sein das ich mich irre, habe eine weile kein JS-OO mehr gesehen.
11. August 200520 j ähm, ja, denke ich hab ein klitzekleines bisschen ahnung davon ^^ man das sind überladene funktionen deshalb werden sie ja auch über die anzahl der parameter bestimmt, wie ich geschrieben hab wird sie in: dTree.prototype.addNode = function(pNode) aufgerufen, aber da du dir wahrscheinlich den code nich gezogen hast poste ich ihn jetzt extra für dich: /*--------------------------------------------------| | dTree 2.05 | www.destroydrop.com/javascript/tree/ | |---------------------------------------------------| | Copyright (c) 2002-2003 Geir Landrö | | | | This script can be used freely as long as all | | copyright messages are intact. | | | | Updated: 17.04.2003 | |--------------------------------------------------*/ // Node object function Node(id, pid, name, url, title, target, icon, iconOpen, open) { this.id = id; this.pid = pid; this.name = name; this.url = url; this.title = title; this.target = target; this.icon = icon; this.iconOpen = iconOpen; this._io = open || false; this._is = false; this._ls = false; this._hc = false; this._ai = 0; this._p; }; // Tree object function dTree(objName) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, useStatusText : false, closeSameLevel : false, inOrder : true } this.icon = { root : 'img/schloss.jpeg', folder : 'img/right.png', //folder : 'img/close.jpeg', folderOpen : 'img/down.png', //folderOpen : 'img/open.jpeg', node : '', //node : 'img/page.gif', empty : 'img/empty.gif', line : 'img/line.gif', join : 'img/join.gif', joinBottom : 'img/joinbottom.gif', plus : 'img/plus.gif', plusBottom : 'img/plusbottom.gif', minus : 'img/minus.gif', minusBottom : 'img/minusbottom.gif', nlPlus : 'img/nolines_plus.gif', nlMinus : 'img/nolines_minus.gif' }; this.obj = objName; this.aNodes = []; this.aIndent = []; this.root = new Node(-1); this.selectedNode = null; this.selectedFound = false; this.completed = false; }; // Adds a new node to the node array dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) { this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open); }; // Open/close all nodes dTree.prototype.openAll = function() { this.oAll(true); }; dTree.prototype.closeAll = function() { this.oAll(false); }; // Outputs the tree to the page dTree.prototype.toString = function() { var str = '<div class="dtree">\n'; if (document.getElementById) { if (this.config.useCookies) this.selectedNode = this.getSelected(); str += this.addNode(this.root); } else str += 'Browser not supported.'; str += '</div>'; if (!this.selectedFound) this.selectedNode = null; this.completed = true; return str; }; // Creates the tree structure dTree.prototype.addNode = function(pNode) { var str = ''; var n=0; if (this.config.inOrder) n = pNode._ai; for (n; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == pNode.id) { var cn = this.aNodes[n]; cn._p = pNode; cn._ai = n; this.setCS(cn); if (!cn.target && this.config.target) cn.target = this.config.target; if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); if (!this.config.folderLinks && cn._hc) cn.url = null; if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { cn._is = true; this.selectedNode = n; this.selectedFound = true; } //////// HIER MÜSSTE DER TITLE ALS DRITTER PARAMETER ÜBERGEBEN WERDEN str += this.node(cn, n); if (cn._ls) break; } } return str; }; // Creates the node icon, url and text //////// HIER SOLL DER TITLE ERHALTEN WERDEN !!! ////////////////////// dTree.prototype.node = function(node, nodeId) { //alert(title); var str = '<div class="dTreeNode">' + this.indent(node, nodeId); if (this.config.useIcons) { if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; if (this.root.id == node.pid) { node.icon = this.icon.root; node.iconOpen = this.icon.root; } str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" /><td valign=middle> <input type=checkbox id="'+title+'" onclick = alert('+title+')></td>'; } if (node.url) { str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; if (node.title) str += ' title="' + node.title + '"'; if (node.target) str += ' target="' + node.target + '"'; if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" '; if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; str += '>'; } else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; str += node.name; if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; str += '</div>'; if (node._hc) { str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; str += this.addNode(node); str += '</div>'; } this.aIndent.pop(); return str; }; }; vielleicht kommen jetzt weniger fragen ^^ Odec
11. August 200520 j Wenn irgendwo im Quelltext steht DTree.prototype.node("a","b","c"); dann ist das ein aufruf an die funktion. A ist die Node, b die Nodeid und c der Titel. komisch, das sieht garnich danach aus: this.node(cn, n);
11. August 200520 j ok, hab mir das mal angegugt das ist immernoch "nur" der Laufzeit-Code, nicht die Datenquelle. grundsätzliches Problem, wo in dTree.prototype.addNode = function(pNode) den Titel herbekommen. "irgendwo" in deinem Quelltext sollte 1x (PHP) oder mehrfach (HTML) die Zeile "dTree.prototype.add(id, pid, name, url, title, target, icon, iconOpen, open)" oder so ähnlich auftauchen. Denn damit erstellst du die Node erst. Wenn du den titel der da als 'title' parameter angegeben ist meinst, ist die lösung denkbar einfach. dann ist cn das Node-objekt und du kannst mit <input type=checkbox id="'+cn.title+'" onclick = alert('+cn.title+')></td>'; arbeiten, ohne das du irgendwas übergeben musst
11. August 200520 j Vielen dank, das hatte ich schonmal versucht, und jetzt leider erst in der javaconsole gesehen das mein string nich so recht mit dem alert will ^^ (da sind doppelpunkte usw drinne..) naja jetzt weiss ich wenigstens bescheid, vielen dank nochma
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.