Post Top Ad

Your Ad Spot

domingo, 4 de octubre de 2020

Treeview Usando Bootstrap Treeview, PHP Y MySQL

 Obtuve una gran respuesta de los tutoriales de vista de árbol Cómo crear un menú de vista de árbol dinámico de los lectores y encontré una solicitud para crear una vista de árbol de arranque usando php y mysql. Estos tutoriales de menú de vista de árbol ayudan a crear un hermoso menú de árbol usando bootstrap 3, php y mysql. Crearé datos JSON a partir de los datos de la tabla mysql que contienen la relación entre padres e hijos como se mencionó en mis tutoriales anteriores.

He encontrado el complemento de vista de árbol de Bootstrap para crear un menú de vista de árbol usando bootstrap 3. Bootstrap treeview es una solución muy simple y elegante para mostrar estructuras de árbol jerárquicas usando bootstrap.

Estos Tutoriales Utilizarán Las Siguientes Dependencias

  • Bootstrap v3.3.4 (> = 3.0.0)
  • jQuery v2.1.3 (> = 1.9.0)
  • PHP (> = 5.2.0)
  • MySQL (> = 5.3.0)

bootstrap-treeview

Como se describe en la vista de árbol de bootstrap en sus documentos, necesitamos crear un objeto JSON JavaScript anidado que contendrá la información de todos los nodos con todas las opciones.Necesitamos definir los siguientes tipos de objetos JSON para crear la estructura jerárquica.

Donde como:
texto: esto se usará para mostrar el nombre / etiqueta del nodo.
nodo []: esta matriz contendrá todos los nodos hijos del nodo padre.

Podemos definir todas las propiedades u opciones en los nodos, por ejemplo. bg-imagecoloretc.con cada nodo como se muestra a continuación,

Como puede ver en el objeto json único anterior, puede personalizar su nodo muy fácilmente utilizando las propiedades json anteriores. Hay varias opciones disponibles para crear una opción personalizada.


Cómo Crear Un Árbol Dinámico Usando Bootstrap Treeview, PHP Y MySQL

Por lo tanto, estamos usando los archivos a continuación para crear una estructura dinámica de vista de árbol usando el complemento de árbol bootstrap jquery, php y mysql. Es muy fácil y simple, la estructura del proyecto es la siguiente,

  1. index.php : este archivo se utiliza para mostrar el árbol
  2. response.php : este archivo se usa para buscar nodos de árbol de la base de datos y convertirlos en un objeto json.

Crear Tabla De Base De Datos Y Conexión Usando PHP Y MySQL

Primero crearemos una conexión de base de datos para obtener los nodos de la tabla de mysql usando php. Supongo que sí 'test', si no tiene, cree una nueva base de datos y complete el nombre 'test'.

Paso 1: Cree la estructura de la tabla para los nodos del menú de árbol almacenados.

Paso 2: Crear cadena de conexión usando php con mysql en ( response.php) file.We han pasado $servername$username$password$dbnameparámetros a objeto de conexión MySQL.

Paso 3: Incluyó todos los js/cssarchivos de bootstrap treeview en el index.phparchivo.

Paso 4: contenedor de menú de árbol creado en formato index.php.

Paso 5: Usaremos la solicitud ajax para obtener datos JSON del lado del servidor php. Usaré la solicitud GET tipo Ajax y pasé los datos json al método bootstrap treeview.

Paso 6: llamaremos al método bootstrap treeview en el contenedor div donde queremos representar la estructura jerárquica '#treeview_json'. La identificación del contenedor es .

Ahora trabajaremos en el lado del servidor usando PHP, crearé un response.phparchivo que se usará en la solicitud AJAX anterior. Crearemos una cadena de conexión con mySQL como se indica en Step 2.

Obtendremos toda la información de los nodos de MySQL en lugar de Constant JSON y estableceremos las opciones de nodo según sea necesario para arrancar el nodo JSON de la vista de árbol, finalmente crearemos la estructura jerárquica JSON como necesidad para la vista de árbol de arranque.

Paso 7: creó la matriz PHP de todos los nodos del árbol y codifíquela en json ( response.php).

Conclusión:

He creado un menú de vista de árbol usando el complemento de vista de árbol de arranque. Es muy fácil de usar y tiene opciones más personalizables disponibles para el nodo de vista de árbol. Usé PHP y MySQL para obtener datos de nodos de árbol JSON del lado del servidor y analizar json según sea necesario para los datos de JSON de vista de árbol de arranque.

Puede descargar el código fuente y la demostración desde el siguiente enlace.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas