一、引入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;//bpoimport 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>
转载于:https://www.cnblogs.com/Lxiaojiang/p/6038169.html
相关资源：ztree实现的基本功能和数据库交互