在B/S开发中页面制作涉及HTML、CSS、javascript等技术，我们随掌握相关技术，但实际开发中页面美化特别是样式设计一直困扰着我们。怎样更好、更快的设计美观、专业、时代性的页面呢？JQuery EasyUI就能帮助我们解决这个问题。
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog（网页窗体效果），tabs，tree，DataGrid（强大的数据的绑定和显示控件），ValidateBox（数据验证控件，可以很好的对表单数据进行验证）、window等等。
OK，下面就开始我们的探索之旅…
|
|
一、JqueryEasyUI准备
1、下载 jQuery EasyUI 1.2.3
2、将下载包中下列内容拷贝到你项目中
themes文件夹
jquery.easyui.min.js
jquery-1.4.4.min.js
3、在页面中加入js/css文件
<link rel="stylesheet" type="text/css" href="../common/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../common/themes/default/easyui.css" />
<script type="text/javascript" src="../common/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>
二、Dialog（网页窗体效果）
轻松实现在显示页面对话框，可定制工具栏、按钮、对话框内容，足以满足应用的需要，效果如下：
语法格式：
$(‘#dd’).dialog(options);
Options是参数描述，描述形式是{属性名：值, 属性名：值,…},在很多JQuery框架中方法的参数都是这样描述的
主要属性列表：
l title：‘对话框标题’
l minimizable :true|false
l maximizable :true|false
l resizable :true|false
l toolbar :[{…},{…},{…},…] //定义工具栏
l buttons ::[{…},{…},{…},…] //定义对话框右下角的按钮
对于属性有多个值的设置，采用如下形式（同样大多数JQuery框架中也都是这样描述的）：
[
{text:'添加',iconCls:'icon-add',handler:function(){alert('t');}},
{text:'查询',iconCls:'icon-search',handler:function(){alert('t');}
]
说明iconCls设置按钮的图标样式，目前jQuery EasyUI图标有（存放在themes/icons目录）：
对应的样式即 icon-图标文件名
代码实现：
Open.html：
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../common/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>
<script type="text/javascript" src="open.js"></script>
<span onclick="Open_Dialog()">弹框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习">
<!—在此处组织对话框的内容-->
Dialog Content
</div>
Open.js:
function Open_Dialog() {
$('#mydialog').show();//首先把隐藏的层显示出来
$('#mydialog').dialog(
{ minimizable: true,
maximizable: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
}
},{
text: '查询',
iconCls: 'icon-search',
handler: function() {
alert('查询数据') }
}],
buttons: [{
text: '关闭 ',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}
这样就ok，试一下吧！
三、各种消息框
Js中的alert()、confirm()外观太土气了，现在都是采用弹出层的效果，要与时俱进
使用messager组件可轻松实现
1、 显示消息框
$.messager.alert(title, msg, icon, fn )，效果如下：
2、$.messager.confirm(title, msg, fn )，效果如下：
Messager的这两个方法十分简单,title 设置对话框的标题，msg对话框的内容，icon对话框上的图标类型（取值：error,question,info,warning），fn单击按钮要调用的函数
示例代码：
<script>
function alert_info(){
$.messager.alert('消息框','消息','info');
}
function confirm_info(){
$.messager.confirm('确认','要删除吗？',function(ret){
if(ret){
$.messager.alert('消息','已删除');
}
});
}
</script>
<a href="javascript:alert_info();">消息</a><br>
<a href="javascript:confirm_info();">确认</a><br>
3、$.messager.show(Options)
比较特殊，是在屏幕的右下角显示消息框，可设置超时时间（the message window will be auto closed when timeout.），常常用来制作及时提醒的效果
Options是参数描述，描述形式是{属性名：值, 属性名：值,…}
主要属性:
Width:窗体宽度
Height:窗体高度
Msg:窗体文本内容
Title:窗体标题
Timeout:设置窗口的多长时间关闭
showType:消息窗口的显示方式：null，slide，fade，show。默认是 slide
示例代码：
function show(){
$.messager.show({
title:'提示信息',
msg:'信息5秒后消失',
showType:'show',
height:300,
width:400,
timeout:5000
});
}
<a href="javascript:void(0)" onClick="show()">显示</a> |
四、表单验证
表单验证：一要编写验证规则；二要编写信息显示效果。比较麻烦，占据我们比较多的时间，而JQuery EasyUI提供的验证组件很好的解决这个问题，只需在表单字段上做如下设置：
Class="easyui-validatebox" 设置验证结果的样式
validType=” email” 应用验证规则
required="true" 决定是否必须填写
missingMessage=”Email必须填写” 设置显示信息
invalidMessage=”Email格式无效” 设置显示信息
即可，是不是很容易
不过validType只有email、url、length[m,n]几种验证规则
效果演示：
代码：
<tr>
<td align="right">姓名:</td>
<td><input class="easyui-validatebox" required="true" validType="length[2,6]" missingMessage="姓名必须填写" invalidMessage="姓名必须是2到6位"></td>
</tr>
<tr>
<td align="right">电子邮件:</td>
<td><input class="easyui-validatebox" required="true" validType="email"></td>
</tr>
<tr>
<td align="right">URL:</td>
<td><input class="easyui-validatebox" required="true" validType="url"></td>
</tr>
五、DataGrid数据列表控件
DataGrid用来做什么的呢？让我们先看看用它实现的效果：
通过DataGrid可以以表格的形式呈现数据，可以实现分页、排序、执行添加、修改、删除数据，为我们提供很多便利，正因为DataGrid的强大，所以使用起来也相当比较复杂，我们先从基本的学起，逐步深入
一、基本属性
Title：DataGrid的标题
Width：宽度
Height：高度
iconCls：DataGrid的图标
二、定义列标题，DataGrid有两种形式的列标题
定义普通列属性
Columns
定义冻结列：被冻结的列将不随着水平滑块的滚动而滚动（类似于Excel效果）
frozenColumns
两种列标题设置列的值是一样的
[{field:'age',title:'年龄',width:50},{field:'grade',title:'班级',width:80},… ]
field:标题名称（与json数据的属性名一致）
title：标题文本
width:宽度
三、绑定数据
url：‘数据源’，要求采用Json格式组织数据
指定json文件
动态产生（稍后讲解）
特定的Json格式数据，要求如下：
{"rows":[
{"id":"1001","name":"Jack","age":18,"grade":"S101"},
{"id":"1002","name":"Peter","age":18,"grade":"S101"},
{"id":"1003","name":"John","age":18,"grade":"S101"} ]
}
说明：rows描述要显示的所有行数据，使用{‘属性名’：‘值’,. ‘属性名’：‘值’,…}描述一条记录，记录之间用’,’分割，注意属性名要与列标题的field属性值一致，这样记录就绑定到DataGrid上了
四：定义工具栏
toolbar
值：[{text:'添加',iconCls:'icon-add'},'-',{text:'删除',iconCls:'icon-remove'}]
这些是DataGrid最核心的属性掌握了这些，我们来做个练习
代码演示:
页面部分：
<body>
<table id="test"></table>
</body>
Js代码：
$(function() {
$('#test').datagrid({
title: 'jQuery EasyUI---DataGrid',
iconCls: 'icon-save',
width: 500,
height: 350,
url: 'datagrid_data.json',
frozenColumns: [[
{ field: 'ck', checkbox: true },
{ title: 'ID', field: 'ID', width: 80, sortable: true }
]],
columns: [
[
{ field: 'name', title: '姓名', width: 120 },
{ field: 'addr', title: '地址', width: 120, sortable: true },
{ field: 'opt', title: '操作', width: 100, align: 'center',
formatter: function(value, rec) {
return '<span style="color:red">编辑 删除</span>';
}
}
]],
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
} }, '-',
{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存数据')
} }]
});
});
五、数据分页
DataGrid跟分页相关的属性有主要有三个：
pagination：true 表示使用分页
pageSize：5 设置一页显示多少条记录
pageList：[5,10,20] 设置下拉列表的选项，通过该选项可以重新设置分页尺寸
注意若pagination：true 数据源（json数据）必须设置total属性，通过该属性设置数据的总记录数，这对于分页是必须得
Json数据格式：
{“total”:20,
"rows":[
{"id":"1001","name":"Jack","age":18,"grade":"S101"},
{"id":"1002","name":"Peter","age":18,"grade":"S101"},
{"id":"1003","name":"John","age":18,"grade":"S101"} ]
}
六、使用DataGrid动态显示数据并实现分页
主要三个步骤：
步骤1：设置url: '/demo/ListServlet‘
步骤2：编写后台组件
接受二个参数： page: 页号； rows: 每页记录大小
这两个参数是DataGrid分页导航向目标（url设置的动态页面）传递的数据
提取数据集合(List)
步骤3：转化JSon格式
使用json-lib组件
完整示例代码如下：
页面：
<body>
<table id="student"></table>
</body>
JS代码：
<script>
$(function(){
$("#student").datagrid(
{
title:'学生信息',
width:500,
height:400,
iconCls:'icon-save',
url:'/querydemo/ListServlet',
idField:"id",
singleSelect:false,
frozenColumns:[[
{field:'ck',checkbox:true},
{field:'id',title:'编号',width:50},
{field:'name',title:'姓名',width:100}
]],
columns:[
[
{field:'age',title:'年龄',width:50},
{field:'grade',title:'班级',width:80}
],
],
toolbar:[
{text:"删除",iconCls:"icon-remove"},
{text:"添加",iconCls:"icon-add"}
],
pagination:true,
pageSize:5,
pageList:[5,10,20]
}
);
});
</script>
ListServlet代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
StudentService ss=new StudentServiceImpl();
String spage=request.getParameter("page");
String srows=request.getParameter("rows");
if(spage==null||spage.equals("")){
spage="1";
}
if(srows==null||srows.equals("")){
srows="5";
}
int page=Integer.parseInt(spage);
int row=Integer.parseInt(srows);
PageMode pm=ss.getStudentList(page, row);
JSONObject jsonobj=new JSONObject();
jsonobj.put("total", pm.getTotalCount());
jsonobj.put("rows", pm.getData());
response.getWriter().print(jsonobj.toString());
}
说明：使用JSObject组件将java数据转为Json格式数据，然后通过Response输出到客户端
JSONObject jsonobj=new JSONObject();//创建JSObject组件
//将要转换的数据放置到jsonobj中
//放置DataGrid分页所需要的total属性其值
jsonobj.put("total", pm.getTotalCount());
//放置DataGrid分页所需要的rows属性及其值
jsonobj.put("rows", pm.getData());
//将存放在jsonobj的数据，转化为JSON格式
jsonobj.toString()
注意：需要向项目中加入如下Jar包
业务层代码（StudentServiceImpl）：
private List<Student> stuList=new ArrayList<Student>();
public StudentServiceImpl(){
//可操作数据库，这里在list中组织数据
stuList.add(new Student(1001,"张飞",18,"S2"));
stuList.add(new Student(1002,"刘备",18,"S2"));
stuList.add(new Student(1003,"貂蝉",18,"S2"));
stuList.add(new Student(1004,"关羽",18,"S2"));
stuList.add(new Student(1005,"曹操",18,"S2"));
stuList.add(new Student(1006,"夏侯惇",18,"S2"));
stuList.add(new Student(1007,"周瑜",18,"S2"));
stuList.add(new Student(1008,"孙权",18,"S2"));
stuList.add(new Student(1009,"孙坚",18,"S2"));
stuList.add(new Student(1010,"关平",18,"S2"));
stuList.add(new Student(1011,"Jack",18,"S2"));
stuList.add(new Student(1012,"Jack",18,"S2"));
stuList.add(new Student(1013,"Jack",18,"S2"));
stuList.add(new Student(1014,"Jack",18,"S2"));
stuList.add(new Student(1015,"Jack",18,"S2"));
stuList.add(new Student(1016,"Jack",18,"S2"));
stuList.add(new Student(1017,"Jack",18,"S2"));
stuList.add(new Student(1018,"Jack",18,"S2"));
stuList.add(new Student(1019,"Jack",18,"S2"));
stuList.add(new Student(1020,"Jack",18,"S2"));
}
@Override
public PageMode getStudentList(int pageNo, int pageSize) {
// TODO Auto-generated method stub
PageMode pm=new PageMode();
pm.setTotalCount(20);
int offset=(pageNo-1)*pageSize;
int end=pageNo*pageSize;
for(int i=offset;i<end;i++){
pm.getData().add(stuList.get(i));
}
return pm;
}
实体组件：
PageMode：
public class PageMode {
//封装总记录数
private int totalCount;
//封装数据
private List data=new ArrayList();
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
}
Student：
public class Student implements java.io.Serializable {
private int id;
private String name;
private int age;
private String grade;
//省略set/get方法
}
发表评论
相关推荐
jquery EasyUI的API，方便使用easyui查看。。。。。。
jqueryEasyUI 下载，及api下载 jqueryEasyUI 下载，及api下载
jquery easyui 帮助文档 非常好用的
jquery easyui demo 网页下载下来打包了，还有datagrid简要说明
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jQuery EasyUI EasyUI 组件范例
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jQuery EasyUI 1 4版本更新内容： Bug（修复） menu：修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题； datagrid：修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jQuery EasyUI中文参考手册.chm
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
使用Jquery EasyUI制作的日历，单击input控件弹出日历选择日期，代码很简单，仅供参考
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。通过jQuery EasyUI开发者不需要编写复杂的javascript，也不需要对css样式有深入的...
SSH+Jquery easyUI后台管理系统
jQuery EasyUI 1.4.5 版 API 中文版
ssm框架+jquery easyui案例