jstree

jstree + ssh

 

前台

 

    js及css的引用

 

<script type="text/javascript" src="/jstree/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/jstree/jquery.jstree.js"></script>
	<link type="text/css" rel="stylesheet" href="/jstree/jstree.style.css"/>

 

 

   使用ajax异步获取树节点，其中可以设置主题位置

 

<script type="text/javascript" class="source">
	$(function () {
		$.jstree._themes = "/jstree/themes/"
		$("#resTree").jstree({ 
			"json_data" : {
				"ajax" : {
					"url" : "http://localhost:8888/res.do?status=createResTree"
				}
			},
			"plugins" : [ "themes", "json_data" ]
		});
		$("#resTree").jstree("set_theme","default");
	});
</script>

 

   定义用于显示tree的div

 

<div id="resTree"></div>

 

 

 

后台

 

/**	通过拼接的字符串，生成树的json，并设置成json文件格式输出到页面
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 */
	public ActionForward createResTree(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		List resList=new ArrayList();
		this.resManager.getparentresid();
		sb.append("[");
		String treeJSON = addJson(Long.valueOf(0));
		treeJSON+="]";
		System.out.println(treeJSON);
		//设置编码及文件格式
		response.setContentType("text/json; charset=GBK");
		//设置不使用缓存
		response.setHeader("Cache-Control","no-cache");
		try {
			response.getWriter().write(treeJSON);
			response.getWriter().flush();
			response.getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
	/**	拼接json字符串，用于jstree的显示
	 * @param resourceId
	 * @return
	 */
	public String addJson(Long resourceId){
		//用于存放父节点对象
		List parentList=new ArrayList();
		String hql;
		//由于业务需要，将获取父节点hql语句与子节点hql语句分开
		if(resourceId==0){
			hql="From EcopResources e where e.resourceType>0 and e.parent is null order by e.resourceId";
			parentList=this.resManager.findByCondition(hql);
		}else{
			hql="From EcopResources e where e.parent.resourceId=? order by e.resourceId";
			parentList=this.resManager.findByCondition(hql,new Object[]{resourceId});			
		}
		for(int i=0;i<parentList.size();i++){
			//获得节点对象，拼接json
			EcopResources er = (EcopResources) parentList.get(i);
			sb.append("{ \"data\" : {\"title\" : \""+er.getResourceName()+"\",\"attr\" : { \"href\" : \"/res.do?status=showres&resourceId="+er.getResourceId()+"\" , \"target\": \"right\"}}");
			//如果有子集
			if(er.getChildren().size()>0){
				sb.append(", \"children\" : [");
				Set set = er.getChildren();
				Iterator it = set.iterator();
				while(it.hasNext()){
					EcopResources erCildren = (EcopResources) it.next();
					sb.append("{ \"data\" : {\"title\" : \""+erCildren.getResourceName()+"\",\"attr\" : { \"href\" : \"/res.do?status=showres&resourceId="+erCildren.getResourceId()+"\" , \"target\": \"right\" }}},");
					addJson(erCildren.getResourceId());				
				}
				sb.append("]");
			}
			sb.append("},");
		}
		return sb.toString();
	}

//节点模型类
public class EcopResources  {
		
		private Long resourceId;
		private Long parentResourceId;
		private String resourceName;
		private Long resourceType;
		// 父节点 * --- 1
		private EcopResources parent;
		// 子节点 1 --- *
		private Set children;
	}

 

 

 

使用 JSON 生成 jstree例子 (附件)