樹型結構，樹形圖
想實現一下“樹型結構”，提供一種實現思路，實踐方法為先主干後細節，此處只寫主干思路。
1、先看效果圖：
實現框架為：mybatis + spring + zTree + zDialog;
2、根據頁面元素，及zTree前台框架，抽象出樹型結構對象，用於接收後台的數據庫數據，方便使用java對象，傳輸數據信息到前台頁面。
注：面向對象編程的思想，多用幾次就有了。
![]()
package com.dyl.dto;
import java.io.Serializable;
/**
* 樹查詢結果類
*
* @author duyaolin
* @date 2016-6-1 下午04:26:21
*/
public class TreeModel implements Serializable {
private static final long serialVersionUID = -3975150427085854588L;
private String id;// 節點id
private String pId;// 父節點pId,I必須大寫
private String name;// 節點名稱
private boolean open = false;// 是否展開樹節點，默認不展開
private String url;// 節點鏈接的目標URL
private String icon;// 節點自定義圖標的URL路徑
private String title;// 節點提示信息
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getpId() {
return pId;
}
public void setpId(String pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isOpen() {
return open;
}
public void setOpen(boolean open) {
this.open = open;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}
View Code
3、配置web.xml、jdbc.properties、springContext-*.xml、mybatis-config.xml。
![]()
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!-- 加載Spring容器配置 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 設置Spring容器加載配置文件路徑 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:context/springContext-*.xml</param-value>
</context-param>
<!-- Spring請求分發servlet -->
<servlet>
<servlet-name>SpringServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:context/dispatcher_servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SpringServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SpringServlet</servlet-name>
<url-pattern>*.doo</url-pattern>
</servlet-mapping>
<!-- 解決工程編碼過濾器 -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
View Code
![]()
jdbc.driverClassName=oracle.jdbc.driver.OracleDriver
jdbc.url=jdbc:oracle:thin:@127.0.0.1:1521:ORCL
jdbc.username=dyl
jdbc.password=dyl
View Code
![]()
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.1.xsd">
<!-- 讀取屬性文件 -->
<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="locations">
<list>
<value>classpath:jdbc.properties</value>
</list>
</property>
</bean>
<!-- 配置DataSource數據源 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close" >
<property name="driverClassName" value="${jdbc.driverClassName}" />
<property name="url" value="${jdbc.url}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
<property name="initialSize" value="1" />
<property name="maxActive" value="5" />
<property name="maxIdle" value="2" />
<property name="minIdle" value="1" />
<property name="maxWait" value="-1" />
<property name="timeBetweenEvictionRunsMillis" value="20000" />
<property name="minEvictableIdleTimeMillis" value="10000" />
<property name="defaultAutoCommit" value="false" />
</bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:sqlmap/mybatis-config.xml" />
</bean>
<!-- SESSION模板 -->
<bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg index="0" ref="sqlSessionFactory" />
</bean>
<!-- 配置事務管理器 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
View Code
![]()
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!-- changes from the defaults -->
<setting name="lazyLoadingEnabled" value="false" />
</settings>
<!-- Register Alias -->
<typeAliases>
<typeAlias alias="org" type="com.dyl.dto.OrgDto" />
<typeAlias alias="emp" type="com.dyl.dto.EmpDto" />
<typeAlias alias="tree" type="com.dyl.dto.TreeModel" />
</typeAliases>
<!-- Register Mapper -->
<mappers>
<mapper resource="com/dyl/dao/EmpDaoMapper.xml" />
<mapper resource="com/dyl/dao/OrgDaoMapper.xml" />
</mappers>
</configuration>
View Code
4、編寫數據層。
![]()
package com.dyl.dao;
import java.util.List;
import com.dyl.dto.TreeModel;
public interface IOrgDao {
public List<TreeModel> getTreeList(String org);
}
View Code
![]()
<?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">
<!-- namespace和定義的Mapper接口對應，並實現其中的方法 -->
<mapper namespace="com.dyl.dao.IOrgDao">
<select id="getTreeList" parameterType="java.lang.String" resultType="tree">
select distinct comcode id, comcname name, uppercomcode pId, (comcode || '-' || comcname) title, comlevel from org
start with comcode like concat(#{org}, '%') connect by nocycle uppercomcode = prior comcode order by comlevel
</select>
</mapper>
View Code
5、編寫業務層。
![]()
package com.dyl.service;
import java.util.List;
import com.dyl.dto.TreeModel;
public interface IOrgService {
// 獲取機構樹信息
public List<TreeModel> getTreeList(String org) throws Exception;
}
View Code
![]()
package com.dyl.service.impl;
import java.util.List;
import javax.annotation.Resource;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.dyl.dao.IOrgDao;
import com.dyl.dto.TreeModel;
import com.dyl.service.IOrgService;
@Transactional
@Service("orgServiceImpl")
public class OrgServiceImpl implements IOrgService{
@Resource(name="sqlSessionTemplate")
private SqlSessionTemplate session;
public List<TreeModel> getTreeList(String org) throws Exception {
IOrgDao orgDao = session.getMapper(IOrgDao.class);
List<TreeModel> list = orgDao.getTreeList(org);
return list;
}
}
View Code
6、編寫控制器。
![]()
package com.dyl.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import com.dyl.dto.TreeModel;
import com.dyl.service.IOrgService;
@Controller
@RequestMapping("org.do")
public class OrgController {
Logger logger = Logger.getLogger(this.getClass());
@Resource(name = "orgServiceImpl")
private IOrgService orgService;
// 選擇機構
@RequestMapping(params = "method=queryOrg")
public void queryOrg(HttpServletRequest request,
HttpServletResponse response, ModelMap model) throws IOException {
String data = "";// 返回標識到客戶端，"0"-後台處理失敗（系統異常）
response.setContentType("text/html;charset=GBK");// 讓浏覽器用GBK來解析返回的數據
PrintWriter printWriter = response.getWriter();
try {
List<TreeModel> treeList = orgService.getTreeList(request.getParameter("org"));
if (treeList.size() == 0) {
data = "2";// 沒有數據
} else {
data = JSONArray.fromObject(treeList).toString();
}
} catch (Exception e) {
data = "0";
logger.error("獲取機構樹信息出現異常", e);
}
printWriter.write(data);
printWriter.close();
}
}
View Code
7、父頁面核心代碼。
![]()
<input name="org" type="text" ondblclick="selectOrg();">
function selectOrg() {
var org = fm.org.value;
var url = '/WebRoot/jsp/invoicemanage/invoiceOrgTree.jsp?org=' + org;
var diag = new Dialog();
diag.Width = 400;
diag.Height = 400;
diag.Title = "請選擇機構";
diag.ShowButtonRow = true;
diag.OKEvent = function() {
var orgOfTree = diag.innerFrame.contentWindow.document.getElementById('orgOfTree').value;
if (orgOfTree && orgOfTree != '') {
fm.org.value = orgOfTree;
diag.close();
} else {
Dialog.alert('<span>);
}
};
diag.URL = url;
diag.show();
diag.okButton.value = "確 定";
diag.cancelButton.value = "取 消";
}
View Code
8、編寫樹型結構頁面。
![]()
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String org = request.getParameter("org");
%>
<html>
<head>
<title>機構樹</title>
<link rel="stylesheet" type="text/css" href="/WebRoot/css/standard.css">
</head>
<body onload="init('rLike')" background="/WebRoot/images/bgCommon.gif">
<form name="fm" method="POST" action="">
<table cellpadding="5" cellspacing="1">
<tr>
<td>機構：</td>
<td>
<input type="text" id="orgOfTree" name="orgOfTree" class="codecode" maxLength="10"
value="<%=org %>" ondblclick="init('rLike');">
</td>
</tr>
</table>
<ul id="orgTree" class="ztree">
</ul><br/>
</form>
</body>
<script type="text/javascript" src="/WebRoot/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/WebRoot/js/zDialog/zDrag.js"></script>
<script type="text/javascript" src="/WebRoot/js/zDialog/zDialog.js"></script>
<script type="text/javascript" src="/WebRoot/js/mask.js"></script>
<link rel="stylesheet" type="text/css" href="/WebRoot/js/zTree/zTreeStyle.css">
<script type="text/javascript" src="/WebRoot/js/zTree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
var orgOfTree = fm.orgOfTree.value;
function init(flag) {// flag為模糊查詢標志
$(function() {
alert("jQuery oK!");
});
$.ajax( {
type : "POST",
url : '/WebRoot/org.do',
data : {
method : 'queryOrg',
org : fm.orgOfTree.value
},
dataType : "json",
beforeSend : function() {
$(document).mask('系統正在處理中，請稍後...');
},
success : function(data) {
if ('0' == data) {
Dialog.alert('<span>, function() {
Dialog.close();
});
} else if ('2' == data) {
Dialog.alert('<span>);
} else {
var setting = {
callback : {
onCheck: zTreeOnCheck,
onClick: zTreeOnClick
},
check : {
chkStyle : 'radio',
//enable : true,
radioType : 'all'
},
data : {
key : {
name : 'title'
},
simpleData : {
enable : true
}
}
};
var treeNodes = data;// 把後台封裝好的簡單Json格式賦給treeNodes
$(function() {
$.fn.zTree.init($("#orgTree"), setting, treeNodes);
});
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
var nodes = treeObj.getNodes();
if (nodes.length > 0) {
treeObj.selectNode(nodes[0]);
fm.orgOfTree.value = nodes[0].id;
//fm.orgNameOfTree.value = nodes[0].name;
}
}
},
error : function(XMLResponse) {// 用於調試錯誤
alert(XMLResponse.responseText);
},
complete : function() {
$(document).unmask();
}
});
}
// 用於捕獲checkbox/radio被勾選或取消勾選的事件回調函數
function zTreeOnCheck(event, treeId, treeNode) {
fm.orgOfTree.value = treeNode.id;
//fm.orgNameOfTree.value = treeNode.name;
}
// 用於捕獲節點被點擊的事件回調函數
function zTreeOnClick(event, treeId, treeNode) {
fm.orgOfTree.value = treeNode.id;
//fm.orgNameOfTree.value = treeNode.name;
};
</script>
</html>
View Code
9、最後，附上代碼結構圖。
注：本次實踐是常見工具庫的調用，也花了兩個半小時，想出來、做出來、說出來、寫出來，是不一樣的。完。
