El menú de árbol resultará familiar para los lectores que estén familiarizados con el Administrador de programas de Windows. Haga clic en el símbolo en el lado izquierdo del elemento para expandirlo; haga clic nuevamente para reducirlo. He leído muchos artículos sobre los métodos de implementación de JavaScript de los menús de árbol. El principio es muy simple. Todos utilizan el control de atributos de visualización en Estilo. El enfoque de este artículo no se centra en esto, pero me gustaría hablar sobre cómo extraer datos de la base de datos y actualizar dinámicamente el menú del árbol cada vez.
El menú de árbol se utiliza principalmente para la navegación. El sitio web tiene muchas columnas y cada columna tiene muchas subcolumnas. Las columnas cambian con frecuencia, como agregar nuevas columnas, cambiar los nombres de las columnas existentes, ajustar la relación entre las columnas primarias y secundarias, etc. Sería muy inconveniente cambiarlas. el código de la página cada vez. Y como la información se almacena en la base de datos, la implementación dinámica se vuelve posible y necesaria.
Este artículo no se centra en la teoría. Solo le proporciona un fragmento de código para discutir con usted los problemas de implementación de PHP. Para facilitar la explicación, el autor realizó algunos cambios en la base de datos. Se supone que la cadena del menú se almacena en la tabla del menú, el campo principal almacena la cadena del menú principal, el campo secundario almacena la cadena del submenú y el campo subid. almacena la identificación del submenú.
lt;?php
$DB = new My_DB();
$DB-gt; query("seleccione subid, principal del menú agrupar por principal ordenar por subid");
while ($DB-gt; next_record()){
$Main[] = $DB-gt; f("main");
$Key[] = $DB-gt; f("subid");
}
/*Primero, conéctese a la base de datos y consulte el archivo. -nombre de la columna llamada. El código anterior utiliza la función de base de datos en PHPLib, en la que la matriz $Main se usa para almacenar la cadena del menú principal y la matriz $Key se usa para almacenar las palabras clave del submenú. Puedes utilizar una variedad de métodos, que varían de persona a persona*/
for ($i=0; $ilt; count($Main); $i ){
$j= 0;
$DB-gt; query("seleccione sub, subid del menú donde principal='".$Main[$i]."'"); > // //Utilice la consulta para consultar todas las cadenas de submenú gt que coincidan con el menú principal actual;
/*El siguiente código está combinado con el código HTML. Es posible que no esté acostumbrado, pero este código. Parece conciso. Para simular el menú de árbol, el autor utilizó varios archivos de imagen, l.gif, m.gif y p.gif, en el programa fuente, y utilizó el evento onMouse para simular el efecto dinámico del menú.
Las declaraciones PHP se utilizan principalmente para crear etiquetas id*/
lt para Javascript table width="140" border="0" cellpacing="0" cellpadding="0" class="f14" gt;
lt;trgt;
lt;td width="15"gt;lt;/tdgt;
lt;td id="lt; ?php echo "m_".$Clave[$i]; gt；lt;/tdgt;
lt;tdgt;
lt;div style="cursor:hand" onclick="javascript:MakeMenu('lt;?php echo $Clave [$i]; ?gt;')" onMouseOver="javascript:MakeShow('in')" onMouseOut="javascript:MakeShow('out')"gt;?lt;?php echo $Main[$i ]; ?gt;lt;/divgt;
lt;/tdgt;
lt;/trgt;
lt;tr id="lt;? php echo "s_".$Clave[$i]; ?gt;" style="display:none"gt;
lt;td width="15"gt;lt;/tdgt;
p>lt;td colspan="2"gt;
lt;table width="100" border="0" cellpacing="0" cellpadding="0" class="f9" gt;
lt;?php
mientras ($DB-gt;next_record()){
?gt;
lt ;trgt;
lt;td width="12"gt;
lt;img src="images/lt;?php echo $j==$DB-gt;nf ()?"l.gif"："t.gif"; ?gt;" width="12" height="21"gt;lt;/tdgt;
////Necesita explicar , la variable $j se utiliza aquí para determinar qué imagen mostrar.
El significado de esta oración es que el último elemento del submenú muestra l.gif y otros elementos muestran t.gif
lt; tdgt;?lt;?php echo "lt; a href=\" tuurl\ "gt;yourstrlt;/agt;"?gt;lt;/tdgt;
lt;/trgt;
lt;?php
}
?gt;
lt;/tablegt;
lt;/tdgt;
lt;/trgt;
lt;/tablegt;
lt;?php
} gt;
En este punto, la misión de PHP ha finalizado, puedes ejecutar el código Eche un vistazo y vea cuál es el resultado. Considerándolo todo, su resultado es exactamente la estructura que desea para un menú de árbol. A continuación necesitamos construir el código Javascript. Es muy simple, no voy a describirlo en detalle.
lt;script language="javascript1.2"gt;
lt;!--
función MakeMenu(id){
mid="m_" id;
sid="s_" id;
con (documento){
if (all(sid).style. display=="ninguno"){
all(sid).style.display=""
all(mid).innerHTML="lt;img src='images/ m.gif' width='9' height='21'gt;";
}else{
all(sid).style.display="none";
p>
all(mid).innerHTML="lt;img src='images/p.gif' width='9' height='21'gt;";
}
}
}
función MakeShow(to){
con (documento){
if (to== 'en'){
window.event.srcElement.style.color="red";
window.event.srcElement.style.fontWeight="bold ";
}else{
window.event.srcElement.style.color="";
window.event.srcElement.style.fontWeight=" ";
}
}
}
--gt;
lt;/scriptgt;
Los lectores que estén familiarizados con Javascript no deberían tener problemas para comprender el código anterior. La dificultad de este código radica en la parte de implementación de PHP. Encontré muchos problemas al depurar y siempre aparecían errores de Javascirpt.
Después de eliminar todas las dificultades, dedico este código a todos, con la esperanza de ahorrar un tiempo precioso para el futuro trabajo de diseño web de todos.