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 combogrids. Combgrids son la combinación de ambos cuadros de entrada editables con un panel de cuadrícula desplegable.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Ejemplo 1: El siguiente código demuestra el combogrid básico usando el complemento 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 ComboGrid</h2>
<p>Click the dropdown arrow to show the data.</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:100%;
max-width:400px; padding:30px 60px;">
<div style="margin-bottom:20px">
<select class="easyui-combogrid"
style="width:100%" data-options="
panelWidth: 600,
panelMinWidth: '50%',
idField: 'studentid',
textField: 'studentname',
url: 'datafile.json',
method: 'get',
value: 'ST-1',/*Initialize value*/
columns: [[{
field: 'studentid',
title: 'Student ID',
width: 100
},
{
field: 'studentname',
title: 'Name',
width: 120
},
{
field: 'age',
title: 'Age',
width: 80,
align: 'right'
},
{
field: 'marksscored',
title: 'Marks',
width: 150,
align: 'center'
},
{
field: 'gender',
title: 'Gender',
width: 60,
align: 'center'
}]],
fitColumns: true,
label: 'Select Student:',
labelPosition: 'top'
">
</select>
</div>
</div>
</body>
</html>
datafile.json El siguiente es el código para el archivo «datafile.json» utilizado en todos los ejemplos.
{"total":10,"rows":[
{"studentname":"Komal","age":10,"gender":"F",
"marksscored":365,"studentid":"ST-1"},
{"studentname":"Dalton","age":12,"gender":"M",
"marksscored":185,"studentid":"ST-10"},
{"studentname":"Rakesh","age":12,"gender":"M",
"marksscored":385,"studentid":"ST-11"},
{"studentname":"Ram","age":12,"gender":"M",
"marksscored":265,"studentid":"ST-12"},
{"selected":true,"studentname":"Ila","age":12,"gender":"P",
"marksscored":355,"studentid":"ST-13"},
{"studentname":"Manika","age":12,"gender":"F",
"marksscored":158,"studentid":"ST-14"},
{"studentname":"Madhavi","age":12,"gender":"F",
"marksscored":456,"studentid":"ST-15"},
{"studentname":"Preity","age":12,"gender":"M",
"marksscored":235,"studentid":"ST-16"},
{"studentname":"Parul","age":12,"gender":"F",
"marksscored":564,"studentid":"ST-17"},
{"studentname":"Amar","age":19,"gender":"F",
"marksscored":638,"studentid":"ST-18"}
]}
Producción:
- Salida básica:
- Combogrid con valor inicial:
- Ejecución de Combogrid:
Ejemplo 2: El siguiente ejemplo demuestra acciones básicas relacionadas con combogrid.
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 ComboGrid</h2>
<p>Click the buttons to perform some actions.</p>
<div class="easyui-panel" style="width: 100%;
max-width: 400px; padding: 30px 60px;">
<div style="margin-bottom:20px">
<input id="combogridID"
class="easyui-combogrid"
style="width:100%" data-options="
panelWidth: 600,
idField: 'studentid',
textField: 'studentname',
url: 'datafile.json',
method: 'get',
columns: [[
{
field: 'studentid',
title: 'Student ID',
width: 100
},
{
field: 'studentname',
title: 'Name',
width: 120
},
{
field: 'age',
title: 'Age',
width: 80,
align: 'right'
},
{
field: 'marksscored',
title: 'Marks',
width: 150,
align: 'center'
},
{
field: 'gender',
title: 'Gender',
width: 60,
align: 'center'
}
]],
fitColumns: true,
label: 'Select Student:',
labelPosition: 'top'
">
</div>
</div>
<div style="margin:20px 0">
<div style="margin:20px 0">
<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="setCustomValue()">
Set Custom Value
</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>
<div id="getValueResult"></div>
</div>
<script type="text/javascript">
/* To set and get value */
function getValue() {
var val = $('#combogridID').combogrid('getValue');
$('#getValueResult').html(val + " is set");
}
function setValue() {
$('#combogridID').combogrid('setValue', 'ST-14');
}
function setCustomValue() {
$('#combogridID').combogrid('setValue', {
studentid: 'ST-19',
studentname: 'Pari'
});
}
/* To disable the combogrid */
function disable() {
$('#combogridID').combogrid('disable');
}
/* To enable the combogrid */
function enable() {
$('#combogridID').combogrid('enable');
}
</script>
</body>
</html>
Producción:
- Pantalla básica:
- Demostración de acción:
- Configuración personalizada:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA