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.
El árbol combinado es un componente de la interfaz de usuario que es una combinación de un árbol desplegable con control de selección.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Nota: Cuide las rutas de archivo adecuadas para los archivos precompilados mientras implementa los siguientes códigos.
Ejemplo 1: El siguiente ejemplo demuestra el combotree básico utilizando el archivo «dataTree.json» y las bibliotecas jQuery EasyUI.
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> </head> <body> <h2>jQuery EasyUI ComboTree</h2> <p> Click the button to show the data tree. </p> <div style="margin: 20px 0"></div> <!-- easyui-panel class is used --> <div class="easyui-panel" style= "width: 100%; max-width: 400px; padding: 30px 60px;"> <div style="margin-bottom: 20px"> <!--easyui-combotree class is used--> <input class="easyui-combotree" value="131" data-options= "url: 'dataTree.json', method: 'get', label: 'Select Node:', labelPosition: 'top'" style="width:100%"> </div> </div> </body> </html>
dataTree.json: El siguiente es el código para el archivo «dataTree.json» que se usa en todos los ejemplos de datos.
Javascript
[{
"id":1,
"text":"Users",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":101,
"text":"Family"
},{
"id":102,
"text":"Colleagues"
},{
"id":103,
"text":"Relatives"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":131,
"text":"Intel"
},{
"id":132,
"text":"nodejs",
"attributes":{
"p1":"my Attribute1",
"p2":"my Attribute2"
}
},{
"id":133,
"text":"Common files"
},{
"id":134,
"text":"Mail",
"checked":true
}]
},{
"id":13,
"text":"home.html"
},{
"id":14,
"text":"tutorials.html"
},{
"id":15,
"text":"jobs.html"
}]
}]
Producción:
- ComboTree con valor inicializado:
- Árbol combinado básico:
Ejemplo 2: El siguiente código demuestra los métodos básicos realizados en el árbol combinado.
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>
</head>
<body>
<h2>jQuery EasyUI ComboTree </h2>
<p>Click the buttons </p>
<div class="easyui-panel" style=
"width: 100%; max-width: 400px;
padding: 30px 60px;">
<div style="margin-bottom: 20px">
<input id="combotreeID"
class="easyui-combotree"
data-options="url: 'dataTree.json',
method: 'get',
label: 'Select folder/file:',
labelPosition: 'top'"
style="width:100%">
</div>
</div>
<div style="height:10px"></div>
<div id="resultDivID"></div>
<div style="margin:20px 0">
<!-- easyui-linkbutton class
is used to link -->
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="getValue()">
GetValue
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="setValue()">
SetValue
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="disable()">
Disable
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="enable()">
Enable
</a>
</div>
<script type="text/javascript">
/* Method to get value */
function getValue() {
var val = $('#combotreeID')
.combotree('getValue');
$('#resultDivID')
.html(val + " is set");
}
/* Method to set value */
function setValue() {
$('#combotreeID')
.combotree('setValue', '103');
}
/* Method to disable select button */
function disable() {
$('#combotreeID')
.combotree('disable');
}
/* Method to enable select button */
function enable() {
$('#combotreeID')
.combotree('enable');
}
</script>
</body>
</html>
Producción:
- Antes de la ejecución:
- Después de la ejecución:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA