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
- // Creates the node icon, url and text
-
dTree.prototype.node = function(node, nodeId) {
-
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="" />';
-
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.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;
-
};
-
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
- 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_parent_cod` smallint(5) NOT NULL default '0',
-
PRIMARY KEY (`treeview_cod`)
-
) ENGINE=MyISAM;
-
-
INSERT INTO `tab_treeview` VALUES
-
(1,'root','expediente',0),
-
(2,'parent1','expediente',1),
-
(3,'parent2','expediente',1),
-
(4,'parent3','expediente',1),
-
(5,'child1','carpeta',2),
-
(6,'child2','carpeta',2),
-
(7,'grandchild1','documento',5),
-
(8,'grandchild2','documento',5),
-
(9,'child3','carpeta',4),
-
(10,'child4','documento',4),
-
(11,'grandchild3','subcarpeta',9),
-
(12,'grandgrandchild1','documento',11),
-
(13,'grandgrandchild2','documento',11);
2
