下拉树(ztree)的简单使用

来源：互联网发布：nginx优化10万并发编辑：程序博客网时间：2024/05/22 00:30

数据库的表结构和数据

效果图

使用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;}}

2、编写mapping

<?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 BYYEAR(start_date) UNIONSELECT r.id + (SELECT MAX(id) FROM riqi),(SELECT q.id FROM riqi q WHERE YEAR(q.start_date) = YEAR(r.start_date) GROUPBY YEAR(q.start_date)) AS pId, MONTH(r.start_date) as nameFROM riqi r GROUP BY MONTH(r.start_date),YEAR(r.start_date) UNIONSELECT r.id + (SELECT MAX(id) FROM riqi) + (SELECT MAX(id) FROM riqi),(SELECT q.id + (SELECT MAX(id) FROM riqi) FROM riqi q WHEREMONTH(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 nameFROM riqi r GROUP BYDAY(r.start_date),MONTH(r.start_date),YEAR(r.start_date)</select></mapper>

3、编写dao

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();}

5、编写serviceimpl

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 {@Autowiredprivate TreeMapper treeMapper;@Overridepublic List<Tree> findAll() {return this.treeMapper.findAll();}}

6、编写controller

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 {@Autowiredprivate 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();}}

7、jsp

<%@ 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>

阅读全文

0 0