JS-Tree (destroydrop - dtree)

[Odec]

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

[mkScheller]

wow, geiler code, genau so mag ich das auch, richtig schwer zu lesen, yeah! :cool:

[Aiun]

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.

[Odec]

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

[Aiun]

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.

[Odec]

ä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

[Odec]

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);

[Aiun]

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

[Odec]

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