EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
En este artículo, aprenderemos cómo diseñar un combotreegrid usando jQuery EasyUI. árbol
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<input class="easyui-tree">
Propiedades:
- url: una URL para recuperar datos remotos.
- método: El método http para recuperar datos.
- animar: define si mostrar el efecto de animación cuando el Node se expande o contrae.
- casilla de verificación: Define si mostrar la casilla de verificación antes de cada Node.
- cascadeCheck: define si se debe verificar en cascada.
- onlyLeafCheck: define si mostrar la casilla de verificación solo antes del Node hoja.
- líneas: Define si mostrar líneas entre los Nodes del árbol.
- dnd: define si habilitar arrastrar y soltar.
- data: Los datos del Node a ser cargados.
- queryParams: los parámetros adicionales que se enviarán al servidor al solicitar datos remotos.
- formateador: define cómo representar el texto del Node.
- filtro: define cómo filtrar los datos del árbol local.
- cargador: define cómo cargar datos desde un servidor remoto.
- loadFilter: devuelve los datos filtrados para mostrar.
Eventos:
- onClick: se activa cuando el usuario hace clic en un Node.
- onDblClick: se activa cuando el usuario hace doble clic en un Node.
- onBeforeLoad: se activa antes de que se realice una solicitud para cargar datos
- onLoadSuccess” Se activa cuando los datos se cargan correctamente.
- onLoadError: se activa cuando fallan los datos cargados.
- onBeforeExpand: se activa antes de que se expanda el Node.
- onExpand: se activa cuando se expande el Node.
- onBeforeCollapse: se activa antes de que se contraiga el Node.
- onCollapse: se activa cuando el Node está colapsado.
- onBeforeCheck: se activa antes de que los usuarios hagan clic en la casilla de verificación.
- onCheck: se activa cuando los usuarios hacen clic en la casilla de verificación.
- onBeforeSelect: se activa antes de que se seleccione el Node.
- onSelect: se activa cuando se selecciona el Node.
- onContextMenu: se activa cuando se hace clic con el botón derecho en el Node.
- onBeforeDrag: se activa cuando comienza el arrastre de un Node.
- onStartDrag: se dispara cuando comienza a arrastrar un Node.
- onStopDrag: se activa después de dejar de arrastrar un Node.
- onDragEnter: se activa cuando se arrastra un Node para introducir algún Node de destino en el que se pueda soltar.
- onDragOver: se activa cuando se arrastra un Node sobre algún Node de destino al que se puede soltar.
- onDragLeave: se activa cuando se arrastra un Node y deja algún Node de destino en el que se puede soltar.
- onBeforeDrop: se activa antes de que se elimine un Node; devuelva falso para denegar la eliminación.
- onDrop: se activa cuando se descarta un Node.
- onBeforeEdit: se dispara antes del Node de edición.
- onAfterEdit: se activa después de editar el Node.
- onCancelEdit: se dispara cuando se cancela la acción de edición.
Métodos:
- options: Devuelve las opciones del árbol.
- loadData: carga los datos del árbol.
- getNode: obtiene el objeto de Node especificado.
- getData: obtiene los datos del Node especificado, incluidos sus hijos.
- recargar: recargar los datos del árbol.
- getRoot: Obtener el Node raíz
- getRoots: Obtener los Nodes raíz
- getParent: Obtener el Node principal
- getChildren: Obtener los Nodes hijos
- getChecked: Obtener los Nodes marcados.
- getSelected: obtiene el Node seleccionado y lo devuelve.
- isLeaf: determina que el Node especificado es hoja.
- encontrar: el Node especificado y devolver el objeto de Node.
- findBy: busca el Node especificado por campo.
- seleccionar: seleccione un Node.
- controlar; Establezca el Node especificado como marcado.
- desmarcar: establece el Node especificado como desmarcado.
- colapsar: Colapsar un Node.
- expandir: expandir un Node.
- colapsarTodo: Colapsar todos los Nodes.
- expandAll: expande todos los Nodes.
- expandTo: expandir desde la raíz hasta el Node especificado.
- scrollTo: Desplazarse al Node especificado.
- append: agrega algunos Nodes secundarios a un Node principal
- alternar: alterna el estado expandido/contraído del Node.
- insertar: inserta un Node antes o después del Node especificado.
- remove: Elimina un Node y sus Nodes secundarios.
- pop: abre un Node y sus Nodes secundarios.
- actualizar: actualiza el Node especificado.
- enableDnd: habilita la función de arrastrar y soltar.
- disabledDnd: deshabilite la función de arrastrar y soltar.
- beginEdit: comienza a editar un Node.
- endEdit: Finaliza la edición de un Node.
- cancelEdit: cancela la edición de un Node.
- doFilter: Realiza la acción de filtro.
Enlace CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<script type=”text/javascript” src=”jquery.min.js”></script>
<!–bibliotecas jQuery de EasyUI –>
<script type=”text/javascript”src=”jquery.easyui.min. js”></script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript”src=”jquery.easyui.mobile.js”></script>
Ejemplo 1:
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
$(document).ready(function (){
$('#gfg').tree({
dnd: false,
animate: true
});
});
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>EasyUI jQuery tree widget</p>
<div class="easyui-panel" style="padding:5px">
<ul id='gfg'>
<li>
<span>GeeksforGeeks</span>
<ul>
<li data-options="state:'closed'">
<span>GfG1</span>
<ul>
<li>
<span>Geeks</span>
</li>
<li>
<span>for</span>
</li>
<li>
<span>Geeks</span>
</li>
</ul>
</li>
<li>
<span>Courses</span>
<ul>
<li>Self Placed</li>
<li>DSA</li>
<li>Web Development</li>
</ul>
</li>
<li>Geeks</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Producción:
Referencia: http://www.jeasyui.com/documentation/