struts2跟easyui 示例一 後臺生成json資料傳到前臺html頁面
目標：使用struts2和easyui實現後臺生成json資料，前臺html中table展示資料
步驟：1、建立struts2
2、新增json 相關包
3、新增easyui
1、*建立web專案struts2easyui;
*新增struts2需要的包
*在web.xml中新增攔截器
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
*在src目錄下建立struts2.xml,內容先為空
2、新增json相關包
3、新增easyui js檔案
*在struts2.xml中新增傳遞json 的配置檔案
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"><struts> <include file="struts-default.xml"></include> <constant
name="struts.i18n.encoding" value="utf-8"/> <package name='json' extends="json-default"> <action name="funcAction_*" class="action.FuncAction" method="{1}"> <result type="json"> <param name="root">resultObj</param> </result> <!-- <result
name="root">resultObj</result> --> </action> </package></struts>
其中需要指定result 的type="json" 引數的 name必須是root 引數中的resultObj為action中的屬性
*新增action包下的FuncAction(當然也可以是其它包下或其它類名，跟struts.xml對應就可以了)
package action;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
//action 中
public class FuncAction extends ActionSupport {
private JSONObject resultObj = null;
public JSONObject getResultObj() {
return resultObj;
}
public void setResultObj(JSONObject resultObj) {
this.resultObj = resultObj;
}
// 省去getter setter方法。
public String execute() {
return getFunc();
}
public String getFunc() {
JSONObject json = JSONObject
.fromObject("{\"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}");
this.setResultObj(json);
return SUCCESS;
}
}
*新增顯示用的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.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<!-- <table id="test"></table> -->
<table id="test" class="easyui-datagrid" title="Basic DataGrid" style="width:800px;"
data-options="singleSelect:true,collapsible:true">
<thead>
<tr>
<th data-options="field:'nodeIcon',width:150">圖示</th>
<th data-options="field:'parentID',width:120">父節點編號</th>
<th data-options="field:'nodeID',width:120,align:'right'">節點編號</th>
<th data-options="field:'isLeaf',width:120,align:'right'">節點型別</th>
<th data-options="field:'nodeText',width:120">節點名稱</th>
<th data-options="field:'nodeAction',width:120,align:'center'">連線程式</th>
</tr>
</thead>
</table>
</body>
</html>
*新增easyui的執行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')
}*/
}]
});
});
總結：easyui 傳遞json分為以下幾個步驟
新增easyui js檔案
在struts2.xml中新增傳遞json 的配置檔案
在action下新增屬性型別顯jsonobject的物件，只需要給這個物件賦值就可以了
新增顯示用的test.html
新增easyui的執行js,所有的有關行為和顯示內容都可以在js中或控制元件上的屬性上進行設定。
這樣使用的好處，減少層與層之間傳遞的資料量；html頁面不需要經過編譯，減少響應時間；前端設計人員和後臺人員可以並行開發。