要想使用easyui，第一件事情是在项目中添加easyui的组件（css、js等）
先下载：
http://www.jeasyui.com/index.php
下载地址：
http://www.jeasyui.com/download/downloads/jquery-easyui-1.5.3.zip
可选择版本的页面：
http://www.jeasyui.com/download/list.php
需要使用的包和js文件：
locale：包括了地区和语言
plugins：包含了easyui的所有组件
themes：包含了easyui的图标和界面风格
jquery.min.js：jquery的js文件，由于easyui是基于jquery的，所以一定要有。
jquery.easyui.min.js：easyui的初始化js库
http://www.oschina.net/
如何在页面中使用？
需要导入两个js两个css
|
<link href="easyui/themes/default/easyui.css" type="text/css" rel="stylesheet" /> <link href="easyui/themes/icon.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> |
3.1.1 Panel : 登录页面正中间蓝色面板
面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。
3.1.2 form : 使用EasyUI的form组件实现表单数据提交,同时需要添加客户端非空验证
使用easyui的方式三种：
如何设置属性
如何调用easyui组件的方法
如何绑定easyui组件的事件处理函数
3.1.3 linkedbutton: 登录页面的”登录”按钮和”重置”按钮
3.1.4 messager: 当用户登录成功后弹出提示框,点击确认跳转到主页面
3.1.5 validatebox: 输入框使用EasyUI验证框
3.2 主页面:主页面使用layout进行布局,采用1:2:1页面布局,使用如下组件
layout布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。
|
<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div> <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div> <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> <div data-options="region:'center',title:'Center'"></div> </body> |
3.2.1 顶部:简单添加一句话即可
3.2.2 中间:
3.2.2.1 中间-左侧:tree使用树状菜单显示数据,点击菜单项,在右侧tabs中添加一项
3.2.2.2 中间-右侧:整个右侧放置一个tabs,点击tree时在tabs中添加一项
3.2.3 自己设定需求,当右侧tabs中出现一项后,里面包含
3.2.3.1 datagrid : 数据表格,要求有分页.
3.2.3.2 在datagrid上方添加工具栏,工具栏中有”修改”按钮和”删除”按钮
3.2.3.3 点击”删除”弹出消息窗口的确认框($.messager.confirm),用户点击确认删除选中数据.
3.2.3.4 用户点击”修改”弹出dialog窗口,并传递数据.传递数据后修改功能可以不完成.
