By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,599 Members | 1,872 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,599 IT Pros & Developers. It's quick & easy.

Call Javascript function in dtree

P: 2
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
Sep 13 '06 #1
Share this Question
Share on Google+
10 Replies


P: 2
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
Feb 6 '07 #2

acoder
Expert Mod 15k+
P: 16,027
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.
Expand|Select|Wrap|Line Numbers
  1. 'javascript:myfunction();'
Feb 6 '07 #3

P: 2
Great ! So simple, when you know how. Another lesson learnt; thanks.
Feb 7 '07 #4

acoder
Expert Mod 15k+
P: 16,027
No problem, glad you got it working.
Feb 8 '07 #5

P: 1
hi,
I have to do multiselect in dtree(). At present it supports single select.
Any pointer would be great help.
Thanks,
Sovit
May 25 '07 #6

acoder
Expert Mod 15k+
P: 16,027
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?
May 26 '07 #7

P: 1
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,
Sep 19 '07 #8

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 21 '07 #9

P: 1
Aitor Solozabal Merino

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

dtree.js modification --> dtreecheckbox.js

Replace this funtion inside the javascript dtree.js file

Expand|Select|Wrap|Line Numbers
  1. // Creates the node icon, url and text
  2. dTree.prototype.node = function(node, nodeId) {
  3.     var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
  4.     if (this.config.useIcons) {
  5.         if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
  6.         if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
  7.         if (this.root.id == node.pid) {
  8.             node.icon = this.icon.root;
  9.             node.iconOpen = this.icon.root;
  10.         }
  11.       //str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
  12.         str += node.title + '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
  13.     }
  14.     if (node.url) {
  15.         str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
  16.         //if (node.title) str += ' title="' + node.title + '"';
  17.         if (node.target) str += ' target="' + node.target + '"';
  18.         if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
  19.         if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
  20.             str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
  21.         str += '>';
  22.     }
  23.     else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
  24.         str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
  25.     str += node.name;
  26.     if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
  27.     str += '</div>';
  28.     if (node._hc) {
  29.         str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
  30.         str += this.addNode(node);
  31.         str += '</div>';
  32.     }
  33.     this.aIndent.pop();
  34.     return str;
  35. };
  36.  
sample form to call a program to show a dtree with check box selection:
form_to_call_treeview_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,width=40 0,height=600'); " value=" View ">
</td>
</tr>
<tr>
<td>
<INPUT TYPE=SUBMIT VALUE=OK>
</td></tr>
</table>
[/HTML]

program to show a dtree with checkbox:
treeview_checkbox.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>Catalog Tree</title>

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

</head>

<body>
<div class="dtree"><FORM>
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
[/HTML][PHP]<?php
function send_query( $db, $link, $sql ) {
$result = false;
if ($GLOBALS['MYSQLPHPEXTENSION']=="mysqli"){
if ( mysqli_select_db( $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['MYSQLPHPEXTENSION']=="mysqli"){
while ( $row = mysqli_fetch_assoc( $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_parent_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_parent_cod;?>,'<?= $treeview_name;?>','<?= $treeview_url;?>','<?= $treeview_desc;?>');
<?php
}
mysqli_free_result( $result );
}else{
while ( $row = mysql_fetch_assoc( $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_parent_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($categories['categories_name']) . "','', '<input type=checkbox name=categories value=" . $categories['categories_id'] . ">');\n"; //,," . $categories['categories_id'] . ",,,); \n";

echo "d.add(" . $treeview_cod . "," . $treeview_parent_cod . ",'" . addslashes($treeview_name) . "','', '<input type=checkbox name=nodes value=" . $treeview_cod . ">');\n"; //,," . $treeview_cod . ",,,); \n";
}
mysql_free_result( $result );
}
}
} //end function fill_the_tree
echo "<script type='text/javascript'>
<!--

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

$MYSQLPHPEXTENSION="mysql"; // "mysqli"
$PASSWORD = "lbsb2vb"; // ""
$HOST = "localhost"; // "localhost"
$USER = "root"; // "aitorsol"
$DATABASE = "test"; // "aitorsol_es_db"
$TABLE = "tab_treeview"; // "tab_treeview"
if ($GLOBALS['MYSQLPHPEXTENSION']=="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="cycleCheckboxes(this.form)" VALUE="OK">
</form>
<script type='text/javascript'>
<!--
function cycleCheckboxes(what) {

window.opener.document.form1.valor.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.document.form1.valor.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

Expand|Select|Wrap|Line Numbers
  1. use 'test'
  2.  
  3. drop table if exists `tab_treeview`;
  4. CREATE TABLE `tab_treeview` (
  5.   `treeview_cod` smallint(5) NOT NULL auto_increment,
  6.   `treeview_name` char(25) NOT NULL default '',
  7.   `treeview_desc` char(25) NOT NULL default '',
  8.   `treeview_parent_cod` smallint(5) NOT NULL default '0',
  9.   PRIMARY KEY  (`treeview_cod`)
  10. ) ENGINE=MyISAM;
  11.  
  12. INSERT INTO `tab_treeview` VALUES
  13. (1,'root','expediente',0), 
  14. (2,'parent1','expediente',1),
  15. (3,'parent2','expediente',1),
  16. (4,'parent3','expediente',1),
  17. (5,'child1','carpeta',2),
  18. (6,'child2','carpeta',2),
  19. (7,'grandchild1','documento',5),
  20. (8,'grandchild2','documento',5),
  21. (9,'child3','carpeta',4),
  22. (10,'child4','documento',4),
  23. (11,'grandchild3','subcarpeta',9),
  24. (12,'grandgrandchild1','documento',11),
  25. (13,'grandgrandchild2','documento',11);
Feb 25 '08 #10

acoder
Expert Mod 15k+
P: 16,027
Aitor, welcome to TSDN!

Thanks for posting. I'm sure people will find your post useful.
Feb 25 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.