Easy-UI入门案例
Easy-UI是封装了前台逻辑以及显示的基于Jquery技术的前端框架.
Easy-UI特点
- EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p’).panel({…})）和html标记方式（如：class=”easyui-panel”）
- 支持HTML5（通过data-options属性）
Easy-UI常用组件
- Base
- Layout
- Menu and Button
- Form
- Window
- DataGrid and Tree
- Extension
语法
属性
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。
事件
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
方法
调用方法的语法：$(‘selector’).plugin(‘method’, parameter);
解释：
selector 是jQery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
开发步骤
下载程序库并导入EasyUI的CSS和Javascript文件
通过标记或Javascript定义EasyUI组件
The panel content
入门案例
首页jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
客户关系管理系统
客户关系管理系统
欢迎您登陆!
用户列表jsp（crud）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
用户列表
案例总结
首页
- layout
- 案例用了北，西，中间面板搭建整体框架。具体使用查API
- 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。
- accodion
1.案例用来做菜单栏使用，使用ajax方式跳转链接
2.分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的’href’属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
- tabs
1.案例中用tabs搭建主界面，点击菜单时，跳转至主界面，相同的链接，只跳转一次。
2.选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
用户列表
- datagride
1.用于展示用户列表
2.DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
添加用户
- window
1.在用户列表中点击添加时，弹出窗口。
2.窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
- form
1.用于显示添加客户的内容
2.form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
3.使普通表单成为ajax提交方式的表单。
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
修改用户
- 表格改为单选
在datagrid中找到checkbox，singleSelect属性改为true
获得选中行
调用datagrid中的getSelected方法 返回第一个被选中的行或如果没有选中的行则返回null。
回显要修改的数据
from中找到 load方法
方法描述：读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。
删除用户
- 获得选中行
调用datagrid中的getSelected方法 返回第一个被选中的行或如果没有选中的行则返回null。
发送ajax请求删除客户
删除后，刷新列表
调用datagrid中的reload方法。等同于’load’方法，但是它将保持在当前页。