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;
		}
}

                   在control中进行相应的转换。以Id 和Pid 形式。

/**
	 * 根据教秘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>});
});