Ztree的简单使用和后台交互的写法

Posted 2020-08-17 日月心诚

一、引入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;
}