jquery-easyui(替代 extjs) 介绍
2010-03-31 17:14
513 查看
摘自: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,他是这样写的:
自从 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的机电设备管理系统布局 新范例
相关文章推荐
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
- JQuery爱好者们的福音:jQuery EasyUI 开源插件套装 完全替代ExtJS
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
- JQuery爱好者们的福音 jQuery EasyUI 开源插件套装 完全替代ExtJS
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- extjs jquery dwr ajax flex等web前端框架技术介绍
- jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
- 转 JQuery 爱好者们的福音:jQuery EasyUI 开源插件套装 完全替代ExtJS
- JQuery爱好者们的福音:jQuery EasyUI 开源插件套装 完全替代ExtJS
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- Jquery EasyUI API 中文文档 - Tree树使用介绍
- Jquery-zTree替代ExtJS-Tree的实现方案
- jquery-easyui的Datagrid(数据表)的介绍
- JQuery-EasyUI与EXTjs有什么区别?
- jQuery EasyUI API 中文文档 - Tree树使用介绍
- jQuery EasyUI yet another extjs
- jquery-easyUI第一篇【介绍、入门、使用常用的组件】
- jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍