好，静态的页面已经可以完成了，下面就开始加上后台的处理部分。
查看easyui的API可以看到,如果需要后台支持的话，需要设置url属性，下面用java来做后台处理数据。
传输的格式用的是JSON，如果你还不知道JSON那么就去baidu一下好了。
后台现在只添加了struts和spring的支持，如果需要连接数据库那么添加上hibernate或者用jdbc等数据处理层的框架好了
好新建jsp页面，添加默认的编码格式为UTF-8
代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
设置默认路径
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basepath",basePath);
%>
添加默认的css和必须的js包
代码
<link rel="stylesheet" type="text/css" href="${basepath}resources/default.css"/>
<link rel="stylesheet" type="text/css" href="${basepath}resources/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${basepath}resources/themes/icon.css">
<script type="text/javascript" src="${basepath}resources/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${basepath}resources/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basepath}resources/jquery[1].json-1.3.min.js"></script>
OK，现在可以开始写生成表格的程序了。
在$(function(){}中添加调用表格的程序
代码
$('#tt').datagrid({
title:'订购鉴权依赖设置',
iconCls:'icon-save',
500,
height:200,
nowrap: false,
striped: true,
collapsible:true,
url:'${basepath}simulation/simulation.do?method=yilai',
remoteSort: false,
idField:'id',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'id',field:'id',80}
]],
columns:[
[
{title:'产品编号1',field:'key',160},
{title:'产品编号2',field:'value',160}
]
],
rownumbers:true
// toolbar:[{
// id:'btncut',
// text:'删除',
// iconCls:'icon-cut',
// handler:function(){
// alert('del')
// }
// }]
});
});
要注意生成的数据的格式，是标准的JSON的格式。
将struts所使用的action配置到struts-config.xml中
在Action中调用的方法的内容如下：
代码
/**
* 依赖性设置
*
* @param map
* @param form
* @param req
* @param res
* @return
* @throws Exception
*/
public ActionForward huchi(ActionMapping map, ActionForm form,
HttpServletRequest req, HttpServletResponse res) throws Exception {
List<PropertyBean> l = simulationBO.propForGrid("huchi");
JSONArray jsonArray = JSONArray.fromObject(l);
String baseStr = "{\"total\":1,\"rows\":" + jsonArray.toString()
+ "}";
outJsonUTFString(res, baseStr);
return null;
}
注意返回的值的内容，编码格式为UTF-8，看一下outJsonUTFString方法
代码
/**
* dengwei add JSON数据输出
*
* @param response
* @param json
*/
private void outJsonUTFString(HttpServletResponse response, String json) {
// response.setContentType("text/javascript;charset=UTF-8");
response.setContentType("text/html;charset=UTF-8");
try {
outString(response, json);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
使用response的输出返回给调用的页面
代码
// 输出json格式数据
private void outString(HttpServletResponse response, String str) {
try {
PrintWriter out = response.getWriter();
// out.write(str);
out.println(str);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
其中使用net.sf.json.JSONArray来处理生成的json对象，将list中的内容格式化成页面上需要返回的json格式，当然也可以使用其它的工具类来完成。
下面把完整的jsp页面和要使用的几个类文件的源码贴上来吧
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basepath",basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html:html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>依赖设置</title>
<link rel="stylesheet" type="text/css" href="${basepath}resources/default.css"/>
<link rel="stylesheet" type="text/css" href="${basepath}resources/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${basepath}resources/themes/icon.css">
<script type="text/javascript" src="${basepath}resources/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${basepath}resources/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basepath}resources/jquery[1].json-1.3.min.js"></script>
<script>
$(function(){
$('#tt').datagrid({
title:'订购鉴权依赖设置',
iconCls:'icon-save',
500,
height:200,
nowrap: false,
striped: true,
collapsible:true,
url:'${basepath}simulation/simulation.do?method=yilai',
remoteSort: false,
idField:'id',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'id',field:'id',80}
]],
columns:[
[
{title:'产品编号1',field:'key',160},
{title:'产品编号2',field:'value',160}
]
],
rownumbers:true
// toolbar:[{
// id:'btncut',
// text:'删除',
// iconCls:'icon-cut',
// handler:function(){
// alert('del')
// }
// }]
});
});
function setProp(){
$('#formId').form('submit',{
url:"${basepath}simulation/simulation.do?method=modifyYilai",
onSubmit:function(){},
success:function(data){
eval('data='+data);
if (data.success){
$.messager.alert('操作提示','操作成功!','info');
$('#tt').datagrid('reload');
$('#formId').form('clear');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
</script>
</head>
<body>
<html:form action="/simulation/simulation.do?method=setSimulation" styleId="formId">
<div align="center">
<table>
<tr>
<td align="left">产品编号1：</td>
<td><input id="pbkey" type="text" name="pb.key" value=""/></td>
</tr>
<tr>
<td align="left">产品编号2：</td>
<td align="left"><input id="pbvalue" type="text" name="pb.value" value=""/></td>
</tr>
</table>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="setProp()" id="btn-save" class="easyui-linkbutton" icon="icon-ok">设置</a>
</div>
<div align="center">
<table id="tt"></table>
</div>
</html:form>
</body>
</html:html>
要使用的struts文件就自己配置一下吧
<action-mappings> <action attribute="SimulationForm" input="/index.jsp" name="SimulationForm" path="/simulation/simulation" parameter="method" scope="request" type="org.springframework.web.struts.DelegatingActionProxy"> <forward name="index" path="/views/vsopsimulation/index.jsp" /> <forward name="crmindex" path="/views/crmsimulation/index.jsp" /> </action> </action-mappings>
接下来是Action中的代码可以在上边找一下
然后是逻辑类中的代码文件
public List<PropertyBean> propForGrid(String type){
List<PropertyBean> l = new ArrayList<PropertyBean>();
String value = "";
if("yilai".equals(type)){
value = ConfigParser.get("yilai_list");
}else{
value = ConfigParser.get("huchi_list");
}
if(value.length()>0){
String[] str = value.split(";");
for (int i = 0; i < str.length; i++) {
String[] kvStr = str[i].split(",");
PropertyBean prob = new PropertyBean();
prob.setId(i);
prob.setKey(kvStr[0]);
prob.setValue(kvStr[1]);
l.add(prob);
}
}
return l;
}
好了，看一下运行的效果吧，这个工程中没有加上分页，因为数据量不大。
如果有需要源码的我可以把源码分享出来，下一步会完成在产品编号1和产品编号2中添加值后在列表中动态显示。
