Call Javascript function in dtree

[pricter]

Hi I am new to Javascript and I want to use dtree but instead of clicking on the nodes for URL I want to call a another javascript function

Is it something to do in order to achieve that? If yes please help me and forgive me for my ignorance

Thank you in advance

[itKiwi]

Is there anybody who can help us on this ? Like pricter, I am a beginner, and do not want to "mess up" dtree, which others say is very well constructed. I have some ideas, for example, if url is blank, do something, or, call a page with the function embedded, but neither of these seems "right".
Thanks.

Hi I am new to Javascript and I want to use dtree but instead of clicking on the nodes for URL I want to call a another javascript function

Is it something to do in order to achieve that? If yes please help me and forgive me for my ignorance

Thank you in advance

[acoder]

Welcome to The Scripts.

See the API for dtree. When adding a node, you can specify a url. There, put in your javascript, e.g.

'javascript:myfunction();'

[itKiwi]

Great ! So simple, when you know how. Another lesson learnt; thanks.

[acoder]

No problem, glad you got it working.

[sovit]

hi,
I have to do multiselect in dtree(). At present it supports single select.
Any pointer would be great help.
Thanks,
Sovit

[acoder]

hi,
I have to do multiselect in dtree(). At present it supports single select.
Any pointer would be great help.
Thanks,
Sovit

Welcome to TSDN!

Why would you want a multi-select for a tree menu?

[pacaetano]

Hi
I have to do multiselect in dtree(). At present it supports single select.
I need it because i want collect various nodes to an array and send it ot another page, (just the id's of the nodes)
Thanks,

[acoder]

Hi
I have to do multiselect in dtree(). At present it supports single select.
I need it because i want collect various nodes to an array and send it ot another page, (just the id's of the nodes)
Thanks,

Welcome to TSDN!

Unless the author has added this ability, you'll probably have to provide this extended functionality yourself.

[aitorsol]

Aitor Solozabal Merino

Here is a simple modification of dtree.js found on the web to do what you want

dtree.js modification --> dtreecheckbox.j s

Replace this funtion inside the javascript dtree.js file

[CODE=javascript]// Creates the node icon, url and text
dTree.prototype .node = function(node, nodeId) {
var str = '<div class="dTreeNod e">' + this.indent(nod e, nodeId);
if (this.config.us eIcons) {
if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folde r : this.icon.node) ;
if (!node.iconOpen ) node.iconOpen = (node._hc) ? this.icon.folde rOpen : 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="" />';
str += node.title + '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
}
if (node.url) {
str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.u seSelection) ? ((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.us eStatusText) str += ' onmouseover="wi ndow.status=\'' + node.name + '\';return true;" onmouseout="win dow.status=\'\' ;return true;" ';
if (this.config.us eSelection && ((node._hc && this.config.fol derLinks) || !node._hc))
str += ' onclick="javasc ript: ' + this.obj + '.s(' + nodeId + ');"';
str += '>';
}
else if ((!this.config. folderLinks || !node.url) && node._hc && node.pid != this.root.id)
str += '<a href="javascrip t: ' + 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(no de);
str += '</div>';
}
this.aIndent.po p();
return str;
};
[/CODE]
sample form to call a program to show a dtree with check box selection:
form_to_call_tr eeview_checkbox .php
[HTML]<?php


?>
<table>
<tr>
<td>
<FORM name = 'form1' method = 'POST' action = ''>
<input type=text name=valor>
</td>
<td>
<input type=button name=open_popup ONCLICK="window .open('treeview _checkbox.php', 'popuppage', 'scrollbars=yes ,resizable=yes, menubar=yes,wid th=400,height=6 00'); " value=" View ">
</td>
</tr>
<tr>
<td>
<INPUT TYPE=SUBMIT VALUE=OK>
</td></tr>
</table>
[/HTML]

program to show a dtree with checkbox:
treeview_checkb ox.php
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Catalo g Tree</title>

<link rel="StyleSheet " href="dtree.css " type="text/css" />
<script type="text/javascript" src="dtreecheck box.js"></script>

</head>

<body>
<div class="dtree">< FORM>
<p><a href="javascrip t: d.openAll();">o pen all</a> | <a href="javascrip t: d.closeAll();"> close all</a></p>
[/HTML][PHP]<?php
function send_query( $db, $link, $sql ) {
$result = false;
if ($GLOBALS['MYSQLPHPEXTENS ION']=="mysqli"){
if ( mysqli_select_d b( $link,$db) ) {
$result = mysqli_query( $link,$sql );
if ( mysqli_errno( $link ) ) {
echo "MySQL error " . mysqli_errno( $link ) . ": " . mysqli_error( $link ) . "\n<br>When executing:<br>\ n$sql\n<br>";
}
} else {
echo "MySQL error " . mysqli_errno( $link ) . ": " . mysqli_error( $link ) . "\n<br>When selecting database $db\n<br>";
}
}else{
if ( mysql_select_db ( $db,$link) ) {
$result = mysql_query( $sql ,$link);
if ( mysql_errno( $link ) ) {
echo "MySQL error " . mysql_errno( $link ) . ": " . mysql_error( $link ) . "\n<br>When executing:<br>\ n$sql\n<br>";
}
} else {
echo "MySQL error " . mysql_errno( $link ) . ": " . mysql_error( $link ) . "\n<br>When selecting database $db\n<br>";
}
}
return $result;
} //end function send_query
function fill_the_tree( $result) {
if ( $result ) {
if ($GLOBALS['MYSQLPHPEXTENS ION']=="mysqli"){
while ( $row = mysqli_fetch_as soc( $result ) ) {
$campo = 1;
while ( list( $k, $v ) = each( $row ) ) {
if ( $campo == 1 ) {
$treeview_cod = $v;
}
if ( $campo == 2 ) {
$treeview_name = $v;
}
if ( $campo == 3 ) {
$treeview_desc = $v;
If ($treeview_desc =="folder") {
$treeview_url=" ";
}else{
$treeview_url=$ treeview_desc." .url";// or .php or .html
}
}
if ( $campo == 4 ) {
$treeview_paren t_cod = $v;
}
$campo++;
} ;
// rellena el arbol con cada fila que se extrae de la tabla tab_treeview
// Node(id, pid, name, url, title, target, icon, iconOpen, open)
?>
d.add(<?= $treeview_cod;? >,<?= $treeview_paren t_cod;?>,'<?= $treeview_name; ?>','<?= $treeview_url;? >','<?= $treeview_desc; ?>');
<?php
}
mysqli_free_res ult( $result );
}else{
while ( $row = mysql_fetch_ass oc( $result ) ) {
$campo = 1;
while ( list( $k, $v ) = each( $row ) ) {
if ( $campo == 1 ) {
$treeview_cod = $v;
}
if ( $campo == 2 ) {
$treeview_name = $v;
}
if ( $campo == 3 ) {
$treeview_desc = $v;
If ($treeview_desc =="folder") {
$treeview_url=" ";
}else{
$treeview_url=$ treeview_desc." .url";// or .php or .html
}
}
if ( $campo == 4 ) {
$treeview_paren t_cod = $v;
}
$campo++;
} ;
// rellena el arbol con cada fila que se extrae de la tabla tab_treeview
// Node(id, pid, name, url, title, target, icon, iconOpen, open)
//echo "d.add(" . $categories['categories_id'] . "," . $categories['parent_id'] . ",'" . addslashes($cat egories['categories_nam e']) . "','', '<input type=checkbox name=categories value=" . $categories['categories_id'] . ">');\n"; //,," . $categories['categories_id'] . ",,,); \n";

echo "d.add(" . $treeview_cod . "," . $treeview_paren t_cod . ",'" . addslashes($tre eview_name) . "','', '<input type=checkbox name=nodes value=" . $treeview_cod . ">');\n"; //,," . $treeview_cod . ",,,); \n";
}
mysql_free_resu lt( $result );
}
}
} //end function fill_the_tree
echo "<script type='text/javascript'>
<!--

d = new dTree('d'); \n
d.add(0,-1,'Datafile Treeview','','' );\n";

$MYSQLPHPEXTENS ION="mysql"; // "mysqli"
$PASSWORD = "lbsb2vb"; // ""
$HOST = "localhost" ; // "localhost"
$USER = "root"; // "aitorsol"
$DATABASE = "test"; // "aitorsol_es_db "
$TABLE = "tab_treevi ew"; // "tab_treevi ew"
if ($GLOBALS['MYSQLPHPEXTENS ION']=="mysqli"){
$LINK = mysqli_connect( $HOST, $USER, $PASSWORD, $DATABASE ) or die ( "No se ha conectado" );
}else{
$LINK = mysql_connect( $HOST, $USER, $PASSWORD, $DATABASE ) or die ( "No se ha conectado" );
}
$QUERY = "select * from `" . $DATABASE . "` . `" . $TABLE . "` limit 0, 5000";
fill_the_tree( send_query( $DATABASE, $LINK, $QUERY ));

?>[/PHP]
[HTML]document.write( d);

//-->
</script>
<INPUT TYPE="BUTTON" onClick="cycleC heckboxes(this. form)" VALUE="OK">
</form>
<script type='text/javascript'>
<!--
function cycleCheckboxes (what) {

window.opener.d ocument.form1.v alor.value="";
for (var i = 0; i<what.elements .length; i++) {
if ((what.elements[i].name.indexOf(' nodes') > -1)) {
if (what.elements[i].checked) {
window.opener.d ocument.form1.v alor.value += what.elements[i].value + ',';
}
}
}
window.close();
}
//-->
</script>
</div>
</body>

</html>
[/HTML]


a sql script to create in a mysql "test" database a table and data needed by the sample utility

[CODE=sql]use 'test'

drop table if exists `tab_treeview`;
CREATE TABLE `tab_treeview` (
`treeview_cod` smallint(5) NOT NULL auto_increment,
`treeview_name` char(25) NOT NULL default '',
`treeview_desc` char(25) NOT NULL default '',
`treeview_paren t_cod` smallint(5) NOT NULL default '0',
PRIMARY KEY (`treeview_cod` )
) ENGINE=MyISAM;

INSERT INTO `tab_treeview` VALUES
(1,'root','expe diente',0),
(2,'parent1','e xpediente',1),
(3,'parent2','e xpediente',1),
(4,'parent3','e xpediente',1),
(5,'child1','ca rpeta',2),
(6,'child2','ca rpeta',2),
(7,'grandchild1 ','documento',5 ),
(8,'grandchild2 ','documento',5 ),
(9,'child3','ca rpeta',4),
(10,'child4','d ocumento',4),
(11,'grandchild 3','subcarpeta' ,9),
(12,'grandgrand child1','docume nto',11),
(13,'grandgrand child2','docume nto',11);[/CODE]

[acoder]

Aitor, welcome to TSDN!

Thanks for posting. I'm sure people will find your post useful.