摘自:http://hi.baidu.com/zhizhesky/blog/item/1485444a2b62f32808f7ef1d.html
自从 extjs 商业化后，一些类似于 extjs的框架开始初露头角，jquery-easyui 就是这样一个能达到同样效果的框架，现在已经越来越成熟了，它比extjs 简单易用，架构也很不同，Easyui is a collection of user-interface plugin based on jQuery.
比如一个datagrid,他是这样写的：$('#tt').datagrid({
url:'/demo/user/getUsers',
queryParams:{
id:'001',
state:'ok'
}
});
分页：<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination(options);
他的官网：http://jquery-easyui.wikidot.com/start
例子：(http://www.javaeye.com/topic/576846)
利用easyui编写一个用户管理小例子，目的是演示CRUD操作。先看一下效果图：
1、表格的定义：
<table id="user-table">
<thead>
<tr>
<th field="name" width="100">名称</th>
<th field="phone" width="100">电话</th>
<th field="addr" width="100">地址</th>
<th field="duty" width="100">职务</th>
</tr>
</thead>
</table>
利用表格的THEAD来定义列，field属性对应用户数据模型的字段名称。
接着用jQuery创建表格，同时创建一个操作工具栏：
grid = $('#user-table').datagrid({
url:'/demo1/user/getUsers',
title:'用户资料',
600,
height:300,
singleSelect:true,
toolbar:[{
text:'新增',
iconCls:'icon-add',
handler:newUser
},'-',{
text:'修改',
iconCls:'icon-edit',
handler:editUser
},'-',{
text:'删除',
iconCls:'icon-remove'
}]
});
2、定义用户信息窗口和表单
Html代码
<div id="user-window" title="用户窗口" style="400px;height:250px;">
<div style="padding:20px 20px 40px 80px;">
<form method="post">
<table>
<tr>
<td>名称：</td>
<td><input name="name"></input></td>
</tr>
<tr>
<td>电话：</td>
<td><input name="phone"></input></td>
</tr>
<tr>
<td>地址：</td>
<td><input name="addr"></input></td>
</tr>
<tr>
<td>职务：</td>
<td><input name="duty"></input></td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="saveUser()" id="btn-save" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" icon="icon-cancel">取消</a>
</div>
</div>
可以看到，窗口是一个DIV，表单是一个FORM，这种创建方式具有极大的灵活性，不需要学习成本，创建的jQuery代码如下：
$('#btn-save,#btn-cancel').linkbutton();
win = $('#user-window').window({
closed:true
});
form = win.find('form');
其中建立了窗口的操作按钮，并获取表单对象。
3、进行CRUD操作的客户端代码：
function newUser(){
win.window('open');
form.form('clear');
form.url = '/demo1/user/save';
}
function editUser(){
var row = grid.datagrid('getSelected');
if (row){
win.window('open');
form.form('load', '/demo1/user/getUser/'+row.id);
form.url = '/demo1/user/update/'+row.id;
} else {
$.messager.show({
title:'警告',
msg:'请先选择用户资料。'
});
}
}
function saveUser(){
form.form('submit', {
url:form.url,
success:function(data){
eval('data='+data);
if (data.success){
grid.datagrid('reload');
win.window('close');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
function closeWindow(){
win.window('close');
}
例子中使用etmvc框架来处理后台的数据，演示例子中不使用数据库。
定义用户数据模型：
public class User {
public Integer id;
public String name;
public String phone;
public String addr;
public String duty;
public User clone(){
User u = new User();
u.id = id;
u.name = name;
u.phone = phone;
u.addr = addr;
u.duty = duty;
return u;
}
}
定义后台用户的CRUD操作：
public class UserController extends ApplicationController{
/**
* 返回全部用户资料
*/
public View getUsers() throws Exception{
Map<String,Object> result = new HashMap<String,Object>();
result.put("total", users.size());
result.put("rows", users);
return new JsonView(result);
}
/**
* 取得指定的用户资料
*/
public View getUser(Integer id) throws Exception{
User user = users.get(id-1);
return new JsonView(user);
}
/**
* 保存用户资料，这里对用户名称进行非空检验，仅供演示用
*/
public View save(User user) throws Exception{
Map<String,Object> result = new HashMap<String,Object>();
if (user.name.length() == 0){
result.put("failure", true);
result.put("msg", "用户名称必须填写。");
} else {
result.put("success", true);
user.id = users.size()+1;
users.add(user);
}
View view = new JsonView(result);
view.setContentType("text/html;charset=utf-8");
return view;
}
/**
* 更新指定的用户资料
*/
public View update(Integer id) throws Exception{
Map<String,Object> result = new HashMap<String,Object>();
User user = users.get(id-1).clone();
updateModel(user);
if (user.name.length() == 0){
result.put("failure", true);
result.put("msg", "用户名称必须填写。");
} else {
result.put("success", true);
user.id = id;
users.set(id-1, user);
}
View view = new JsonView(result);
view.setContentType("text/html;charset=utf-8");
return view;
}
// 用户资料测试数据
private static List<User> users = new ArrayList<User>();
static{
for(int i=1; i<10; i++){
User user = new User();
user.id = i;
user.name = "name" + i;
user.phone = "phone" + i;
user.addr = "addr" + i;
user.duty = "duty" + i;
users.add(user);
}
}
}
完整的代码请见附件，可以看到，easyui具有极少的JS代码。
demo1.rar (646.4 KB)
jQuery模仿ExtJS之TabPanel
jquery-easyui编写用户管理小例子
基于jquery-easyui的机电设备管理系统布局
新范例