Directorio de artículos
I. Introducción
- Descarga del sitio web oficial: marco EasyUI , descarga de JQuery
- Introduzca los archivos js de easyUI y jquery, coloque estos archivos en el proyecto e impórtelos en la página jsp
- easyUI extrae los componentes, los define y los une a los elementos DOM. Para interactuar con el fondo, los datos de la respuesta en segundo plano deben convertirse de acuerdo con el formato requerido por la API easyUI
2. Introducir y utilizar easyUI
- Al usarlo, debe importar el archivo js y el archivo css de estilo correspondiente a easyUI
- No invierta el orden de importación de archivos js. Algunos zapatos para niños a menudo descubren por qué importo archivos js e informan algunos problemas inexplicables. Sabemos que cuando una página web carga nuestra página de índice, se cargará de arriba a abajo. Luego, algunos archivos js dependen de los archivos jquery. Si el orden es incorrecto, otros js se cargarán primero y luego jquery se cargará en último lugar. Conduce al problema indefinido anterior, así que preste atención al orden de introducción.
<!-- 引入依赖jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>
3. Uso
3.1 Diálogo (ventana de diálogo)
3.1.1 Ejemplo 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>
<body>
<div id="dd">Dialog Content.</div>
<script>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php');
</script>
</body>
</html>
3.1.2 Ejemplo 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>
<body>
<div id="dd">Dialog Content.</div>
<script>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true,
buttons: [
{
text: "OK",
iconCls: "icon-save",
handler: function () {
//do something
}
},
{
text: "Cancel",
iconCls: "icon-save",
handler: function () {
//do something
}
}
]
});
$('#dd').dialog('refresh', 'new_content.php');
</script>
</body>
</html>
3.2 Diseño (diseño)
3.2.1 Ejemplo 1 - Crear un diseño a través de etiquetas
Agregue el código de identificación de clase llamado 'easyui-layout' a la etiqueta <div/>
de la siguiente manera:
<!-- 为<div/>增加名为'easyui-layout'的类名 -->
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'上North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'下South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'右East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
3.2.2 Ejemplo 2: crear diseños anidados
El panel izquierdo (oeste) del panel de diseño anidado está contraído
3.3 DateBox (cuadro de entrada de fecha)
3.3.1 Ejemplo 1: crear un cuadro de entrada de fecha usando una etiqueta
<input id="created_time" type="text" class="easyui-datebox"
required="required"
data-options="value:'Today',panelWidth:'300px',panelHeight:'300px'" />
3.3.2 Ejemplo 2: use JavaScript para crear un cuadro de entrada de fecha y formatear la fecha
Tenga en cuenta que el formato del formato de fecha
a/m/d debe configurarlo usted mismo: atributo del formateador
El ejemplo 1 es el siguiente:
El ejemplo 2 es el siguiente:
<div id="cc" type="text"></div>
<script>
$('#cc').datebox({
required: true,
value: 'Today',
formatter: function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '/' + m + '/' + d;
}
});
var v = $('#cc').datebox('getValue');
alert(v);
</script>
3.4 Paginación
Haga clic para ingresar: documentación oficial de EasyUI , puede ver las propiedades, métodos y eventos de la etiqueta de paginación.
3.4.1 Ejemplo 1
El código y los resultados de ejecución son los siguientes: Puede ver los resultados de ejecución de los atributos total y pageSize
definidos en opciones de datos
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
3.4.2 Ejemplo 2
El código y los resultados de la ejecución son los siguientes: Cuando se hace clic en ellos, aparecerán los valores pageNumber y pageSize actuales.
<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"></div>
<script>
$('#pp').pagination({
total: 200,
pageNumber: 3,
onSelectPage: function (pageNumber, pageSize) {
$(this).pagination('loading');
alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
$(this).pagination('loaded');
}
});
</script>
en el código de arriba
$(esto).paginación('cargando')
3.4.3 Ejemplo 3
<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"
data-options="total:2000,pageSize:10,pageList: [10,20,50,100],
buttons: [
{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},
'-',
{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}
]">
</div>
3.4.4 Ejemplo 4
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
<title>人员管理</title>
<link rel="stylesheet" type="text/css" th:href="@{easyui/themes/default/easyui.css}" />
<link rel="stylesheet" type="text/css" th:href="@{easyui/themes/icon.css}" />
<script type="text/javascript" th:src="@{jquery/jquery-1.8.0.min.js}"></script>
<script type="text/javascript" th:src="@{easyui/jquery.easyui.min.js}"></script>
</head>
ui/jquery.easyui.min.js}"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id',sortable:true,width:'120px',hidden:true"></th>
<th data-options="field:'name',width:'150px'">登录名</th>
<th data-options="field:'age',width:'150px'">年龄</th>
<th data-options="field:'address',width:'150px'">住址</th>
</tr>
</thead>
</table>
</body>
<script>
$(function(){
$('#dg').datagrid({
url: '/searchPersonList',//后台返回数据的请求url
title: "用户管理",
idField: 'id',
loadMsg: 'please wait',
singleSelect: true,
rownumbers: true,
pagination: true
});
var p = $('#dg').datagrid('getPager'); //获取page对象
$(p).pagination({
pageSize: 10,//每页显示的记录条数，默认为10
pageList: [10,20,30],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的文字
afterPageText: '页 共 {pages} 页', //pages为默认的参数吗，代表总页数
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'// from，to , total均为默认参数名，from, to 代表现在是总记录中的第几条到第几条，tatal代表总记录数
});
});
</script>
</html>