Widget de árbol EasyUI jQuery

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/

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *