Re: Checkbox "embedido" en JavaScript Aitor Solozabal Merino
Aqui esta una modificación simple encontrada en la WEB para hacer lo que tú quieres.
Here is a simple modification of dtree.js found on the web to do what you want
dtree.js modification --> dtreecheckbox.js
Reemplazar estas lineas de código en la función dentro del fichero javscript dTree.js
Replace these code lines in dTree.prototype.node = function(node, nodeId) funtion inside the javascript dtree.js file
//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.title) str += ' title="' + node.title + '"';
if (node.target) str += ' target="' + node.target + '"';
un formulario de ejemplo para llamar a un programa que muestra un arbol dTree con las cajas de selección tipo checkbox
sample form to call a program to show a dtree with check box selection:
form_to_call_treeview_checkbox.php
<?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>
programa que muestra un arbol dtree con checkbox
program to show a dtree with checkbox:
treeview_checkbox.php
<?php
?>
<!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>
<?
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 ));
?>
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>
un guión sql para crear en una base de datos "test" mysql con la tabla y datos que son necesarios por la utilidad de ejemplo.
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); |