一、引入ztree的頭文件
<!-- 引入ztree/-->
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/ztree/css/zTreeStyle/zTreeStyle.css" />
二、正文中ZTree出現的地方寫入
<div class="ibox-content" style="height:700px;">
<ul id="tree1" class="ztree"></ul> //id="tree1"是ZTree的標識 ，class="ztree"是引入ztree的類
</div>
三、js實現樹的數據填充
$(function(){
var setting = {
data: {
simpleData: {
enable: true,
idKey:"id",
idPKey:"pId",
}
},
async: {
enable: true, //開啟異步加載
url:baseCtx+"/media/getOrgZTree.action", //設置獲取異步動態加載的數據
dataType: "text",
autoParam:["id"],
otherParam: { },
dataFilter: filter
},
callback: {
onClick: onClick //回調函數為單擊操作
}
};
//濾波
function filter(treeId, parentNode, childNodes) {
var array = childNodes;
return array;
}
//單擊操作---------------------------------------------------------------------------------------------
function onClick(event, treeId, treeNode, clickFlag) {
if (treeNode.isParent) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
//擴展所有子節點
zTree.expandNode(treeNode);
}
//單擊后在標題處 重新拼接html,顯示為***部門的任務信息概覽
document.getElementById('dg_h').innerHTML = '<h5>['+treeNode.name+']任務信息概覽</h5>';
//單擊后的操作
onClickAjax(treeNode.name);
}
//初始化操作---嚴格按照頭文件加載，否則會出現init函數沒有定義這種情況-------------------------------------------------------------------------------------
function init(){
$.post(baseCtx+"/media/getOrgZTree.action",{id:3},function(data){ //id=3是初始輸入，確立根節點的id=3
var result= $.parseJSON(data);
rw_tree=$.fn.zTree.init($("#tree1"),setting, result); //將得到的數據解析並填充到ZTree上
});
}
init();
});
/**
* =====點擊節點的操作來獲取相應的信息的后台請求操作=======================
* =============================
* */
function onClickAjax(treeNodeName) {
$.ajax({
url:baseCtx+"/media/OrgTaskAssess.action",
data:{ ORG_NAME:treeNodeName}, //向后台傳遞的數據是名字 也可以是id 可以根據實際情況來定
type : 'post',
async : false,
dataType : "json", //返回的數據類型是json
success: function(data){
//alert('got it!');
$('#dg').datagrid('loadData', data);//回調成功后重新加載表格的數據 ，前提是表格的字段已經確定
},
});
}
四、后台web請求的寫法
1.action的寫法
package com.*****.media.action;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.struts2.convention.annotation.Action;
//bpo
import com.*****.media.bpo.OrgZTreeBPO;
import com.*****.common.web.BaseAction;
public class OrgZTreeAction extends BaseAction{
private static final long serialVersionUID = 1L;
private String id;
private String name;
private String pid;
/**
* 利用Ztree插件獲取動態樹-----------------------------------------------
* @return
*/
@Action(value = "getOrgZTree")
public String getOrgZTree(){
List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>();
//第一級數據（根節點）
Map<String, Object> orgMap = new HashMap<String, Object>();
orgMap.put("isParent", true);//設置根節點為父節點
orgMap.put("open", true); //根節點展開
orgMap.put("id", id);//根節點的ID
orgMap.put("name", "TEST"); //根節點的名字
resultList.add(orgMap); //列表中先添加第一級的數據
//第二級數據（下級）
List<Map<String, Object>> OrgresultList1 = new ArrayList<Map<String, Object>>();
OrgresultList1 = orgZTreeBPO.getOrgList(orgMap);//根據第一級節點的數據獲取下一級的數據
//判斷列表是否為空
if(null != OrgresultList1 && OrgresultList1.size() !=0)
{
for (Map<String, Object> map1 : OrgresultList1) { //將下一級別的數據用循環讀取
resultList.add(map1);
//獲取第三級數據
List<Map<String, Object>> OrgresultList2 = new ArrayList<Map<String, Object>>();
OrgresultList2 = orgZTreeBPO.getOrgList(map1);
if(null != OrgresultList2 && OrgresultList2.size() !=0)
{
for (Map<String, Object> map2 : OrgresultList2) {
resultList.add(map2);
//獲取第四級數據
List<Map<String, Object>> OrgresultList3 = new ArrayList<Map<String, Object>>();
OrgresultList2 = orgZTreeBPO.getOrgList(map2);
if(null != OrgresultList3 && OrgresultList3.size() !=0)
{
for (Map<String, Object> map3 : OrgresultList2) {
resultList.add(map3);
}
}
}
}
}
}
outputJson(resultList);//輸出數據庫中獲得的數據（數據庫中的存儲也是以樹的形式保存的）
System.out.println(resultList);
return NONE;
}
//字段的get set方法 必須有，不能忽略掉
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
2.xml的寫法
<!--Ztree獲取部門列表-->
<resultMap type="map" id="RwgzInfo">
<result property="name" column="ORG_NAME" /> //column 列是數據庫中的存儲字段，property是Java實體的字段名
<result property="id" column="ORG_ID" />
<result property="pId" column="ORG_HIGHER_ID" />
</resultMap>
<select id="getOrgList" parameterType="map" resultMap="RwgzInfo" >
select ORG_ID,ORG_NAME,ORG_HIGHER_ID from yhgl.wpy_org_test
<where>
<if test="id!=null and id!=''">
and ORG_HIGHER_ID = #{id}
</if>
</where>
</select>