jquery-easyui(替代 extjs) 介绍 - 风雨者2

jquery-easyui(替代 extjs) 介绍

摘自: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:\'用户资料\',
  width: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="width: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的机电设备管理系统布局
新范例