struts 2でextフレームでツリーメニューを表示する

7099 ワード

Json フレームハイベルナー struts ext

1、まずext 3フレームを導入する.
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 2つの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ファイルにあります.

Noip 2013回転ゲーム

4.Vueのカスタムフィルタ