EasyUI tree加载树
Posted 朝花有露
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI tree加载树相关的知识，希望对你有一定的参考价值。
树控件，很常用，可以做有层级的菜单，比如公司划分，省市区的选择等……
最大的好处就是有层级关系，看起来和选择起来比较清晰，就像一串杂乱无章的json你用bejson去格式化一样的感觉，可以适当提升用户体验。
树的两种加载方式
tree的加载方式分为常规加载和异步加载两种，常规加载也就是一次性把整棵树都加载出来，异步加载就是展开父节点的时候才会去加载子节点。
在数据量比较小的时候比价常用，还有一种情况必须使用同步加载，需要全选或者级联选择的时候。
若使用异步加载，那么当你若未展开父节点而勾选父节点的话，实际上只有父节点被选中，而父节点下的子节点还未加载，造成“选择丢失”这种情况必须使用同步加载。
小编的公司项目中，需要加载组织机构树。组织机构为4个节点。从后台传到前台为 json ,当组织结构信息不是从一张表中查到的信息，此时需要添加一个treeEntiy 实体，来进行加载。
/**
* 树形结构信息存储(不是存储在数据库中，用的是一个工具类，纯碎的polo对象)
* @author xulu
*
*/
public class Tree
private String id;
private String pId;//父节点Id
private String name;//名称
private String url;//url
private Boolean open;//节点是否打开
private Boolean checked;//多选框是否选中
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 String getUrl()
return url;
public void setUrl(String url)
this.url = url;
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;
/**
* 根据教秘code查询学院、专业、班级转化成树形-徐露
*
* @param institutionList
* 学院、专业、年级、班级集合
* @return
* @throws Exception
*/
public List<Tree> convertInstitutionNameByTeacherCodeTreeList(List<Map<Serializable, Serializable>> institutionList) throws Exception
List<Tree> InstitutionTree = new ArrayList<Tree>();
List<Tree> InstitutionTreelist = new ArrayList<Tree>();
if (!institutionList.equals(""))
// ================大学院节点=================
Tree tree = new Tree();
tree.setId(institutionList.get(0).get("BIGInstitutionID").toString());// 学院id
tree.setName(institutionList.get(0).get("BigInstitutionName").toString());
tree.setpId("");
tree.setOpen(false);
InstitutionTree.add(tree);
boolean isExist;
// ==============专业节点================
for (Map<Serializable, Serializable> institution : institutionList)
isExist = false;
for (Tree institutionTree : InstitutionTree)
// 专业id
if (institutionTree.getId().equals(institution.get("InstitutionID")))
isExist = true;
// 去重复数据的过程
if (isExist == false)
Tree tree1 = new Tree();
tree1.setId(institution.get("InstitutionID").toString());
tree1.setName(institution.get("InstitutionName").toString());
tree1.setpId(institution.get("BIGInstitutionID").toString());
tree1.setOpen(false);
InstitutionTree.add(tree1);
// ================年级节点===============
// 1.先比较优先级，排序
// 2.将排好序的list,去重
listSortGrade(institutionList);// 调用排序方法，达到年级按大小顺序排序
for (Map<Serializable, Serializable> institution1 : institutionList)
isExist = false;
for (Tree institutionTree1 : InstitutionTree)
String getGradeID = institutionTree1.getId();
// 年级id
String gradeID = institution1.get("InstitutionID").toString() + institution1.get("gradeID").toString();
if (getGradeID.equals(gradeID))
isExist = true;
// 去重复数据的过程
if (isExist == false)
Tree tree2 = new Tree();
tree2.setId(institution1.get("InstitutionID").toString() + institution1.get("gradeID").toString());
tree2.setName(institution1.get("gradeName").toString());
tree2.setpId(institution1.get("InstitutionID").toString());
tree2.setOpen(false);
InstitutionTree.add(tree2);
// ==================班级节点==================
listSortClass(institutionList);// 调用排序方法，达到班级按大小顺序排序
for (Map<Serializable, Serializable> institution2 : institutionList)
isExist = false;
for (Tree institutionTree2 : InstitutionTree)
// 班级id
String getClassID = institutionTree2.getId();
String classID = institution2.get("classID").toString();
if (getClassID.equals(classID))
isExist = true;
// 去重复数据的过程
if (isExist == false)
Tree tree3 = new Tree();
tree3.setId(institution2.get("classID").toString());
tree3.setName(institution2.get("className").toString());
tree3.setpId(institution2.get("InstitutionID").toString() + institution2.get("gradeID").toString());
tree3.setOpen(true);
InstitutionTree.add(tree3);
InstitutionTreelist.addAll(InstitutionTree);
return InstitutionTreelist;
else
return null;
以上是后台代码，在jp 添加组织树节点。
//zTree参数设置
var zTree;
var demoIframe;
var zNodes;
//var userIdsGloble;
var setting =
treeId : "insititutionTree",
view :
dblClickExpand : false,
showLine : true,
selectedMulti : false
,
edit :
drag :
autoExpandTrigger : true,
,
enable : true,
showRemoveBtn : false,
showRenameBtn : false
,
data :
simpleData :
enable : true,
idKey : "id",
pIdKey : "pId",
rootPId : "0"
,
callback :
onClick : zTreeOnClick
;
// 页面加载
$(document).ready(function()
<span style="white-space:pre"> </span>// 加载资源树
<span style="white-space:pre"> </span>var t = $("#tree");
<span style="white-space:pre"> </span>$.ajax(
<span style="white-space:pre"> </span>type : 'post',
<span style="white-space:pre"> </span>url : "queryInstitutionNameByTeacherCode",
<span style="white-space:pre"> </span>dataType : "text",
<span style="white-space:pre"> </span>async : false,
<span style="white-space:pre"> </span>success : function(data)
<span style="white-space:pre"> </span>zNodes = eval(data);
<span style="white-space:pre"> </span>t = $.fn.zTree.init(t, setting, zNodes);
<span style="white-space:pre"> </span>var zTree = $.fn.zTree.getZTreeObj("tree");
<span style="white-space:pre"> </span>// 首次访问主页时默认自动单击根节点
<span style="white-space:pre"> </span>var treeNode = zTree.getNodeByParam("pId", "0");
<span style="white-space:pre"> </span>$("#" + treeNode.tId + "_a").click();
<span style="white-space:pre"> </span>var node = zTree.getNodeByTId(treeNode.tId);
<span style="white-space:pre"> </span>zTree.selectNode(node, false);
<span style="white-space:pre"> </span>zTree.expandNode(node, true, false, false);
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>setFlagTab();
<span style="white-space:pre"> </span>,
<span style="white-space:pre"> </span>error : function(msg)
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>);
);
以上是关于EasyUI tree加载树的主要内容，如果未能解决你的问题，请参考以下文章