struts2+jquery+easyui+datagrid+json 组合显示一个列表组件

一、概述

struts2提供了针对json的插件支持。常规来讲我们将如何将对象数组转成json对象在客户端直接调用呢？尤其和jquery的easyui插件配合使用，这个可能会有很多的问题需要我们解决。这里我只是将几个技术结合阐述。

二、将struts2增加对json的支持处理

1、增加相关jar包，这里我使用的是struts2.2.1.1版本，将他的官方文件下载下来可以看到我们需要的插件包都在，这里我以maven的pom文件片段说明需要增加的支持jar包。

<dependency>
<groupId>jaxen</groupId>
<artifactId>jaxen</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>net.sf.ezmorph</groupId>
<artifactId>ezmorph</artifactId>
<version>1.0.6</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>

<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.1</version>
</dependency>

<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-json-plugin</artifactId>
<version>2.2.1.1</version>
</dependency>

2、选择jquery以及easyui的版本，这里我用的是jquery1.4.4版本和easyui的1.2.2版本（jquery-easyui-1.2.2）

3、进行action代码编写

private static final long serialVersionUID = 1L;
private IGodPositionService godPositionService;
//对象实例
private GodPosition godPosition;
//对象集合
private List<GodPosition> godPositionList;

//这东西得和grid中的参数对应上,返回json对象，不是返回json串
private JSONArray rows;

public JSONArray getRows() {
return rows;
}
public void setRows(JSONArray rows) {
this.rows = rows;
}
//可以用来放回字符串结果
private String result;
//记录数量
private int total=0;

public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}

public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}

/**用来产生json数组的数据*/
public String godlist() throws ServiceException{
HttpServletResponse resp=ServletActionContext.getResponse();
resp.setContentType("application/json");
godPositionList = godPositionService.findAllGodPosition();
//进行集合的转换，转换成json对象
rows=JSONArray.fromObject(godPositionList);
//记录条数的记录
total=godPositionList.size();
logger.info("[total]:"+total+"[rows]:"+rows);
return "root";
}

4、配置文件编写

<package name="jsonpackage" extends="loginpackage,json-default" namespace="/json">

<interceptors>
<interceptor name="loginInterceptor" class="com.jiuchongju.interceptor.LoginInterceptor"></interceptor>
<interceptor-stack name="loginInterceptorStack">
<interceptor-ref name="loginInterceptor"></interceptor-ref>
<interceptor-ref name="json"></interceptor-ref>
<interceptor-ref name="defaultStack"></interceptor-ref>
</interceptor-stack>
</interceptors>
<default-interceptor-ref name="loginInterceptorStack"></default-interceptor-ref>
<action name="godjson" class="JsonAction">
<result name="root" type="json">
<!-- tmd 强烈不建议使用includeProperties。如果只是返回json字符串可以，如果返回json对象。那些include表达式能把你弄死。不信就跟踪源码试试 -->
<param name="excludeProperties">godPositionService,godPosition,godPositionList</param>
</result>
</action>
</package>

5、页面展示代码编写

<link rel="stylesheet" type="text/css" href="<%=path%>/css/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/css/easyui/themes/icon.css">
<mce:script type="text/javascript" src="<%=path%><!--
/js/easyui/jquery-1.4.4.min.js">
// --></mce:script>
<mce:script type="text/javascript" src="<%=path%><!--
/js/easyui/jquery.easyui.min.js">
// --></mce:script>
<mce:script type="text/javascript"><!--

$(function(){

//alert($('#id').val());
$('#tt').datagrid({
url: 'json/godjson!godlist',
title: '每日诸神方位',
width: 880,
height: 400,
fitColumns: true,
columns:[[
{field:'huajiazi',title:'花甲子',width:80},
{field:'nayin',title:'纳音',width:80},
{field:'caishen',title:'财神',width:80,align:'left'},
{field:'xishen',title:'喜神',width:80,align:'left'},
{field:'fushen',title:'福神',width:80},
{field:'id',title:'id',width:80,align:'left'},
{field:'shengmen',title:'生门',width:80,align:'left'},
{field:'simen',title:'死门',width:80},
{field:'yingui',title:'阴贵',width:80},
{field:'yanggui',title:'阳贵',width:80},
{field:'wugui',title:'五鬼',width:80,align:'center'},
{field:'opt',title:'操作',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
//alert(rec.id);
return '<span style="color:red" mce_style="color:red"><a href="javascript:audit('+rec.id+',1)" mce_href="javascript:audit('+rec.id+',1)">修改</a> <a href="javascript:audit('+rec.id+',2)" mce_href="javascript:audit('+rec.id+',2)">删除</a></span>';

}
}
]],
toolbar:[{
id:'btnadd',
text:'添加新的数据',
iconCls:'icon-add',
handler:function(){
$('#btnsave').linkbutton('enable');
$('#ff').form('clear');
$('#win').window('open')
}
}],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!$('#tmenu').length){
createColumnMenu();
}
$('#tmenu').menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
/**对数据列进行显示和隐藏操作*/
function createColumnMenu(){
var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
var fields = $('#tt').datagrid('getColumnFields');
for(var i=0; i<fields.length; i++){
//alert(fields[i]);
$('<div iconCls="icon-ok"/>').html(fields[i]+"xx").appendTo(tmenu);
}
tmenu.menu({
onClick: function(item){
if (item.iconCls=='icon-ok'){
$('#tt').datagrid('hideColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#tt').datagrid('showColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
}

// --></mce:script>
</head>

<body>
<h1>DataGrid - ContextMenu</h1>
<p>可以选择每列的标题隐藏某列</p>

<table id="tt"></table>
</body>
</html>

三、总结经常出现的问题

1、如果返回的不是jsonArray对象，那么客户端显示就没法和easyui的datagrid对应

2、如果返回String类型的json串（内部包含数组），我们需要在jsp页面自己转换成json对象，但是datagrid不支持这类数据方式

3、那个配置文件我们自己最好用exclude来指出那些不返回json类型的视图。用include有bug，或者说我们在特殊的对象数组集合类型的时候需要写更深的通配符策略