Widget de árbol combinado 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 a diseñar un árbol combinado usando jQuery EasyUI. El árbol combinado combina el control de selección con un árbol desplegable.

Descargas para EasyUI para jQuery:

https://www.jeasyui.com/download/index.php

Sintaxis:

<input class="easyui-combotree">

Propiedades:

  • editable: define si el usuario puede escribir texto directamente en el campo.
  • textField: el nombre del campo de datos subyacente para vincular a este ComboTree.

Métodos:

  • opciones: Devuelve el objeto de opciones.
  • clear: Borra el valor del componente.
  • setValues: establece la array de valores del componente.
  • setValue: establece el valor del componente.
  • árbol: Devuelve el objeto árbol.
  • loadData: carga los datos del árbol de configuración regional.
  • recargar:

Enlace CSN: 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

<html>
<head>
    <link rel="stylesheet" type="text/css"  
          href=
"https://www.jeasyui.com/easyui/themes/default/easyui.css">
  
    <link rel="stylesheet" type="text/css"  
          href=
"https://www.jeasyui.com/easyui/themes/icon.css">
  
    <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').combotree({
                editable: false,
                dnd: false
            });
        });
          
    </script>
</head>
<body>
<h2>GeeksforGeeks</h2>
      
<p>EasyUI jQuery combotree widget</p>
  
    <div class="easyui-panel" style="padding:5px">
    <div id="gfg">
        <div style="margin-bottom:20px">
            <input class="easyui-combotree" style="width:100%">
        </div>
    </div>
      </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 *