ExtJS一个很好的，一个非常好的UI工具，但太庞大，太复杂了。对于一些简单的应用也没有必要使用。
最近在网上转着，发现了一款还不错的UI插件-----JQuery EasyUI。对于个人来说，对JQuery还比较熟悉，既然是基于JQuery的，也不妨试试。
JQuery EasyUI其实挺强大的，一些比较常用的比如 windows，tab，datagrid，pagination ,layout,menu,tree等都有，这已经可以构造一些比较实用的东东了。另一方面我发觉比较好的是，它的数据类型基于json数据格式。这就更另我喜悦，我个人比较喜欢这种格式。
另一方面，官方上提供的是etMVC框架，让人摸不着。这里将用struts2来实现一下。
废话不多说，先说说需要准备的东西吧：
第一步：准备阶段。
1.JQuery EasyUI 1.1.1
2.Jquery 1.4
struts2 jar包
1.****json-lib-2.2.3-jdk15.jar
2.ezmorph-1.0.6.jar
3.commons-httpclient.jar
4.commons-beanutils-1.8.0.jar
****struts2-json-plugin-2.1.8.jar
这里重中之重的是，json-lib 和 struts2-json-plugin，
这些jar包可以在struts 2.1.8 lib中找到。
~1.json-lib 是转换对象与json对象的一些操作，其中包含转换为JSONObject、JSONArray、json字符串等。
~2.struts2-json-plugn 我想很多童鞋们以前用的ajax，是直接由out对象输出json字符串吧。这样做，一则需要Servlet API，二则容易出现乱码错误，三则像datagrid中直接需要json对象，你给个字符串是不能解析的。利用这个包，可以使得action传值的时候以json字符串、JSONObject、JSONArray等多种格式传递，很方便。
第二步：编写代码
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<table id="test"></table>
</body>
</html>
2.test.js
$(function(){
$('#test').datagrid({
title:'My Title',//表格标题
iconCls:'icon-save',//表格图标
nowrap: false,//是否只显示一行，即文本过多是否省略部分。
striped: true,
url:'funcAction_getFunc.action', //action地址
sortName: 'parentID',
sortOrder: 'desc',
idField:'nodeID',
frozenColumns:[[
]],
columns:[[
{field:'nodeIcon',title:'图标',width:150},
{field:'parentID',title:'父节点编号',width:120},
{field:'nodeID',title:'节点编号',width:120,sortable:true},
{field:'isLeaf',title:'节点类型',width:120},
{field:'nodeText',title:'节点名称',width:120},
{field:'nodeAction',title:'连接程序',width:120},
]],
pagination:true, //包含分页
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
});
这样，在action中返回一个JSONObject，输出格式为：
{"rows":[{"isLeaf":0,"nodeAction":"","nodeID":1,"nodeIcon":"icon-sys","nodeText":"系统管理","parenetID":0},{"isLeaf":1,"nodeAction":"sys/entryM.html","nodeID":2,"nodeIcon":"icon-nav","nodeText":"栏目管理","parenetID":1}],"total":2}
所以在处理中需要这样来写
//Service中代码
public JSONObject getFuncList(){
FunctionVo func = FactoryDAO.getFuncList(); //FuncitonVo 对应功能的各个属性的封装。可以根据json格式确定需要哪些属性。
JSONObject resultObj = JSONObject.fromObject(func);
}
//action 中
public class FuncAction extends ActionSupport{
private JSONObject resultObj = null;
//省去getter setter方法。
public String execute(){
}
public String getFunc(){
this.setResultObj(FactoryService.getFuncInstance().getFuncList());
return SUCCESS;
}
}
最重要的还有一个struts.xml配置
<package name='json' extends="json-default">
...
<action name="funcAction_*" class="com.FuncAction" method="{1}>
<result name="root">resutObj</result>
</action>
...
</package>
注意：
1.extends 是json-default，表示返回json对象格式。
2.result 中name 总是等于root，
3.result包含的那个是设置的那个，action中设置了resultObj，因此这里写resultObj
这样简单的数据表格就出来了。
仅此为学习，有问题请留言。
下一次，讲 如何进行数据分页，排序 查询。
分享到：
相关推荐
标题 "JQuery EasyUI 整合struts2 代码下载" 涉及到的是一个Web开发中的技术组合，主要集中在前端的JQuery EasyUI框架与后端的Struts2框架的集成应用。JQuery EasyUI是一个基于jQuery的UI库，提供了丰富的组件，如...
Struts2、Ajax、EasyUI、JSON 和...总的来说，"struts2+ajax+easyui+json+datagrid"这个组合为开发高效、交互性强的Web应用提供了一种强大的解决方案，尤其是在处理数据密集型应用时，能够显著提升用户体验和工作效率。
在本文中，我们将探讨如何使用Struts2和jQuery EasyUI框架创建一个简单的CRUD（创建、读取、更新、删除）系统。首先，我们需要理解这两个技术的基础概念。 Struts2是一个基于MVC（Model-View-Controller）架构的...
基于struts,spring，hibernate，oracle环境下jquery easyui环境搭建。实现了使用jquery easyui中的datagrid显示用户列表。测试网址： http://localhost:9090/jquery-easyui-1.2.6BasedonStruts/layout.jsp
标题中的"jQuery EasyUI + Struts2 + Hibernate 封装的 CRUD Datagrid（内置数据库建表语句）"是一个基于Web开发的技术组合，用于构建数据管理应用。这个项目结合了前端的jQuery EasyUI、后端的Struts2框架以及持久...
总的来说，jQuery EasyUI 为 JavaWeb 开发者提供了一个便捷的前端工具集，帮助他们专注于业务逻辑，而不用过多关注 UI 的实现细节。在实际项目中，可以根据需求选择合适的组件组合，搭配后台技术栈（如 SpringMVC、...
这个小程序利用SSH2（Struts2、Spring、Hibernate）框架，结合Maven构建工具，实现了通过jQuery的datagrid插件进行Ajax分页加载数据的功能。以下将详细介绍其中涉及的技术和知识点。 1. **SSH2框架**：SSH2是Java ...
总结来说，"struts2+easyUI+ajax+json用户登录验证"项目是Web开发中的典型应用场景，展示了如何利用这些技术实现前后端交互和动态页面更新，为初学者理解Web开发的基本流程和原理提供了很好的实例。
在本项目中，我们主要探讨如何使用Struts2框架与EasyUI库，通过Maven进行构建和依赖管理，实现一个单元格可编辑的表格——DataGrid。以下将详细阐述涉及的技术点及其应用。 首先，Maven是Apache软件基金会开发的一...
这个项目作为一个学习资源，可以帮助开发者了解如何整合SSH框架与EasyUI DataGrid，实现数据操作和分页功能，对于初学者或者想要提升Web应用开发技能的人来说是非常有价值的。通过这个实例，你可以学习到如何设置...
在"struts2-easyui"的例子中，我们看到的是一个基础的快速入门教程，它演示了如何将这两个技术整合在一起，实现数据的增删改查功能。下面将详细解释这个组合的应用场景、工作原理以及相关的知识点。 1. **Struts2...
1. **整合目标**：本文档的目标是将 Struts2.x、Spring3.x、Hibernate4.x 与 DWR、jquery2.x 和 easyUI1.3.x 进行集成，以构建一个功能齐全且高效的 Web 开发环境。 2. **jQuery 版本选择**：为了兼容性和性能考虑...
- **DataGrid**：jQuery EasyUI 的 DataGrid 是一个强大的表格组件，可以用来展示大量的结构化数据。它可以实现分页、排序、过滤等功能，非常适合用来展示数据库中的数据。 - **Form**：如果需要编辑或新增学生信息...
### Struts2 结合 EasyUI 实现增删改分页排序 #### 一、概述 在Web开发领域，Struts2 和 EasyUI 是两个非常重要的框架和技术。Struts2 是一款基于MVC模式的Java Web应用程序框架，它帮助开发者构建灵活、可扩展的...
SSH4整合EasyUI是一个在Java Web开发中将Spring、Struts2、Hibernate这三大框架（SSH）与EasyUI前端框架结合的过程。这个过程涉及到后端服务的开发、前端页面的构建以及两者之间的交互。SSH是Java领域常用的MVC...
【SSh结合Easyui实现Datagrid的分页显示】是一个典型的Web开发应用场景，涉及到Spring、Struts2和Hibernate（SSh）三大框架与EasyUI前端组件的整合。在这个实例中，我们将探讨如何利用这些技术来实现一个具备分页...
在实际应用中，jQuery EasyUI 可以与后端框架如Spring、Struts等无缝集成，实现前后端分离的开发模式。通过Ajax技术，EasyUI 可以实时地从服务器获取数据，更新用户界面，实现动态交互。例如，数据网格组件...
【基于EasyUI的通用导出】是一个功能模块，主要用于在使用EasyUI数据网格时实现数据的便捷导出。EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和样式，简化了Web开发中的界面构建工作。在这个场景下，我们...