1、首先导入 ext3框架。
2、创建 Syllabus类,列出在教学大纲案例中所需要的字段,同时也是在节点中显示的内容所需要的字段。
package com.erong.struts.json.domain; public class Syllabus { private String id; private String text; private String nodeParentId; private int nodeLevel; private String nodeCode; private boolean leaf; }
3、写一个SyllabusService类,利用类中的getChildrens()发放,取得数据库里的信息,在节点处显示。
package com.erong.struts.json.service; import java.util.List; import org.hibernate.classic.Session; import com.erong.struts.json.domain.Syllabus; import com.erong.struts.json.util.HibernateUtil; public class SyllabusService { public List<Syllabus> getChildrens(String nodeId) { Session session = HibernateUtil.getSessionFactory().getCurrentSession(); session.beginTransaction(); Syllabus syllabus = (Syllabus) session.load(Syllabus.class, nodeId); return session.createQuery( "from Syllabus where subString (nodeCode,1,2*" + syllabus.getNodeLevel() + ")='" + syllabus.getNodeCode() + "'and nodeLevel=" + (syllabus.getNodeLevel() + 1) + " order by nodeCode asc ").list(); } }
4、取得数据库信息要利用hibernate,
当然要配置相应的信息:hibernate.cfg.xml和DomainMapping.hbm.xml两个xml文件。
<hibernate-mapping package="com.erong.struts.json.domain"> <class name="Syllabus" table="syllabus"> <id name="id" column="syllabus_id"> <generator class="uuid.hex" /> </id> <property name="text" column="syllabus_name"/> <property name="nodeParentId" column="parent_id"/> <property name="nodeLevel" column="syllabus_depth"/> <property name="nodeCode" column="syllabus_code"/> <property name="leaf" column="is_leaf" type="yes_no" /> </class> </hibernate-mapping>
5、要利用struts来控制页面,首先要创建action。用类JsonAction中的execute()方法,
调用SyllabusService中的getChildrens()方法,获取数据信息。当然此处也要在action中配置此信息。
package com.erong.struts.json.action; import java.util.List; import com.erong.struts.json.domain.Syllabus; import com.erong.struts.json.service.SyllabusService; import com.opensymphony.xwork2.ActionSupport; public class JsonAction extends ActionSupport { private String node; private List<Syllabus> nodes; public String getNode() { return node; } public void setNode(String node) { this.node = node; } public List<Syllabus> getNodes() { return nodes; } public void setNodes(List<Syllabus> nodes) { this.nodes = nodes; } public String execute() { SyllabusService ss = new SyllabusService(); this.nodes = ss.getChildrens(node); System.out.println("select node id:" + node); System.out.println("元素个数:" + this.nodes.size()); return SUCCESS; } }
6、自定义结果的显示。创建MyJsonResult类来设置结果集的效果。
package com.erong.struts.json.util; import java.util.List; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONSerializer; import org.apache.struts2.dispatcher.StrutsResultSupport; import com.opensymphony.xwork2.ActionInvocation; import com.opensymphony.xwork2.util.ValueStack; public class MyJsonResult extends StrutsResultSupport { protected void doExecute(String finalLocation, ActionInvocation invocation) throws Exception { HttpServletResponse response = (HttpServletResponse) invocation .getInvocationContext().get(HTTP_RESPONSE); ValueStack vs = invocation.getStack(); List list = (List) vs.findValue("nodes"); System.out.println("自定义结果获得的元素个数:" + list.size()); JSONArray jsonArray = (JSONArray) JSONSerializer.toJSON(list); System.out.println(jsonArray.toString()); response.setCharacterEncoding("utf-8"); response.getWriter().print(jsonArray.toString()); } }
7、最后就是js显示页面,创建index.html,在html页面中调用ext中的js,美化一下美观。
同时也要写js方法,来获取数据信息。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3/ext-all.js"></script>
<script type="text/javascript" src="ext3/src/locale/ext-lang-zh_CN.js"></script>
<script language="JavaScript" type="text/javascript">
var tree;
function initTree() {
var tree = new Ext.tree.TreePanel({
loader: new Ext.tree.TreeLoader({dataUrl: '/Struts2Json/JsonDemo.action'})
});
var rootNode = new Ext.tree.AsyncTreeNode({text:'教学大纲', id:'44417711639f42edb25798368ed11b06'});
tree.setRootNode(rootNode);
return tree;
}
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext3/resources/images/default/s.gif';
//初始化Ext状态管理器,此类可返回用户在Cookie中的操作状态
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
tree = initTree();
var viewport = new Ext.Viewport({
layout: "border",
items: [
{region: "north", height: 80, split: false},
{region: "west", layout: "fit", width:300, minWidth: 180, title:"导航树", collapsible: true, split: true, items:[tree]},
{region: "center", layout: "fit", items:[{}]}
]
});
tree.expandAll();
})
</script>
</head>
<body>
</body>
</html>
8、表结构在下面的Sysllabus.sql文件中。