資料庫的表結構和資料

效果圖

使用json格式需使用的jar下載：

http://download.csdn.NET/detail/a1611756193/9850603

使用到的js與css下載：

http://download.csdn.net/detail/a1611756193/9851362

原始碼下載地址：

http://download.csdn.net/download/a1611756193/9893268

程式碼如下：

1、建立實體類

package com.learning.po.tree;

public class Tree {

	private Integer id;
	
	private Integer pId;
	
	private String name;
	
	private Boolean open;
	
	private Boolean checked;

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public Integer getpId() {
		return pId;
	}

	public void setpId(Integer pId) {
		this.pId = pId;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Boolean getOpen() {
		return open;
	}

	public void setOpen(Boolean open) {
		this.open = open;
	}

	public Boolean getChecked() {
		return checked;
	}

	public void setChecked(Boolean checked) {
		this.checked = checked;
	}
	
}
 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.learning.dao.tree.TreeMapper">
	<resultMap id="BaseResultMap" type="com.learning.po.tree.Tree">
		<id column="id" property="id" jdbcType="INTEGER" />
		<result column="p_id" property="pId" jdbcType="INTEGER" />
		<result column="name" property="name" jdbcType="VARCHAR" />
	</resultMap>

	<select id="findAll" resultMap="BaseResultMap">
		<!-- SELECT *, 'true' AS OPEN FROM tree -->
		SELECT id, '0' AS pId, YEAR(start_date) as name FROM riqi GROUP BY
		YEAR(start_date) UNION
		SELECT r.id + (SELECT MAX(id) FROM riqi),
		(SELECT q.id FROM riqi q WHERE YEAR(q.start_date) = YEAR(r.start_date) GROUP
		BY YEAR(q.start_date)) AS pId, MONTH(r.start_date) as name
		FROM riqi r GROUP BY MONTH(r.start_date),YEAR(r.start_date) UNION
		SELECT r.id + (SELECT MAX(id) FROM riqi) + (SELECT MAX(id) FROM riqi),
		(SELECT q.id + (SELECT MAX(id) FROM riqi) FROM riqi q WHERE
		MONTH(q.start_date) = MONTH(r.start_date) AND YEAR(q.start_date) =
		YEAR(r.start_date) GROUP BY MONTH(q.start_date)) AS pId,
		DAY(r.start_date) as name
		FROM riqi r GROUP BY
		DAY(r.start_date),MONTH(r.start_date),YEAR(r.start_date)
	</select>

</mapper>
 

package com.learning.dao.tree;

import java.util.List;

import com.learning.po.tree.Tree;

public interface TreeMapper {

	List<Tree> findAll();
	
}

4、編寫service介面

package com.learning.service.tree;

import java.util.List;

import com.learning.po.tree.Tree;

public interface TreeService {

	List<Tree> findAll();
	
}
 

package com.learning.service.tree.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.learning.dao.tree.TreeMapper;
import com.learning.po.tree.Tree;
import com.learning.service.tree.TreeService;

@Transactional
@Service("treeService")
public class TreeServiceImpl implements TreeService {

	@Autowired
	private TreeMapper treeMapper;
	
	@Override
	public List<Tree> findAll() {
		return this.treeMapper.findAll();
	}

}

package com.learning.controller.tree;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.learning.po.tree.Tree;
import com.learning.service.tree.TreeService;

@Controller
@RequestMapping("/treeController")
public class TreeController {

	@Autowired
	private TreeService treeService;
	
	@RequestMapping("/totree")
	public String totree(){
		return "/tree/tree";
	}
	
	@RequestMapping("/tree")
	public void tree(HttpServletResponse response) throws IOException{
		List<Tree> trees = this.treeService.findAll();
		JSONArray jsonArray = JSONArray.fromObject(trees);
		PrintWriter out = response.getWriter();
		out.print(jsonArray);
		out.flush();
	}
	
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" href="${ctx}/css/zTreeStyle/zTreeStyle.css" type="text/css">
<title>Insert title here</title>
</head>
<body>
	<form id="form" class="form-horizontal" action="" method="post">
		<div class="zTreeDemoBackground left">
			<ul id="tree1" class="ztree"></ul>
		</div>
	</form>

	<script src="${ctx}/js/zTreeStyle/jquery-1.4.4.min.js"></script>
	<script src="${ctx}/js/zTreeStyle/jquery.ztree.core-3.5.js"></script>
	<script src="${ctx}/js/zTreeStyle/jquery.ztree.all-3.5.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			tree();
		});

		var setting = {
			//必不可少
			data : {
				simpleData : {
					enable : true
				}
			},
			//複選框
			check : {
				chkboxType : {
					"Y" : "ps",
					"N" : "ps"
				},
				chkStyle : "checkbox",
				enable : true
			},
			//單擊事件
			callback : {
				onClick : zTreeOnClick
			}
		};

		var zNodes;
		function tree() {
			$.ajax({
				type : "post",
				url : "${ctx}/treeController/tree.do",
				dataType : "json",
				success : function(data) {
					zNodes = data;
					$.fn.zTree.init($("#tree1"), setting, zNodes);
				}
			});
		}

		function zTreeOnClick(event, treeId, treeNode) {
			var temp = ""; 
			for(var i in treeNode){
				temp += i+":"+treeNode[i]+"\n"; 
				
			}
			alert(temp);
		};

		/* function isJson(obj){
			var isjson = typeof(obj) == "object";
			return isjson;
		} */
	</script>
</body>
</html>