Ztree树初始化、默认展开第一级节点

Ztree树初始化和默认展开第一级节点

js代码：

$(function() {    var setting = {       data : {          simpleData : {             enable : true,             idKey : "id",//节点id             pIdKey : "parentId",//父节点id          },       },       view:{          showLine:false,// 是否显示节点之间的连线       },       async : {          enable : true,// 开启异步加载          url : "",//对应的后台请求路径          dataType : "json",          autoParam : [ "id=parentId" ]// 异步加载时需要自动提交父节点属性的参数       },       callback : {//回调函数          onClick : onClick,// 节点被点击时调用          onAsyncSuccess: zTreeOnAsyncSuccess,// 异步加载正常结束的事件回调函数       },    };    function onClick(event, treeId, treeNode, clickFlag) {       var id = treeNode.id;// 树id       var treename = treeNode.name;// 树名称.可以在需要的时候加       var treeObj = $.fn.zTree.getZTreeObj(treeId);       var nodes = treeObj.getSelectedNodes();//       if (nodes.length > 0) {          treeObj.reAsyncChildNodes(nodes[0], "refresh");// 刷新节点       }    //用于捕获异步加载正常结束的事件回调函数    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){       var treeObj = $.fn.zTree.getZTreeObj(treeId);       var nodes = treeObj.getNodes();          if (nodes.length>0) {           for(var i=0;i           treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点           }       }    }    // 加载树初始化    function init() {       $.fn.zTree.init($("#menuTree"), setting);// 将得到的数据解析并填充到ZTree    }    $(function() {       init();//加载数据    }) });

页面代码：

html： div> <ul id="menuTree" class="ztree">ul> div>

2018.11.12新增后台逻辑代码:

@ResponseBody
@RequestMapping("/queryChildNodeTree")
public List> queryChildNodeTree(Integer parentId) {
  List> mapList = new ArrayList>();
  // 首次加载设置根节点
  if (parentId == null) {
	     Map resultMap = new HashMap();
             resultMap.put("isParent", true);
	     resultMap.put("id", PARENT_ID);
	     resultMap.put("name", PARENT_NAME);
	     resultMap.put("parentId", "");
	     mapList.add(resultMap);
	} else {
		 DepartmentFormMap departmentFormMap = new DepartmentFormMap();
		 departmentFormMap.put("parentId", parentId);
                 //查询子节点
		 List departmentList = departmentService.findByNames(departmentFormMap);
			if (!departmentList.isEmpty()) {
				for (int i = 0; i < departmentList.size(); i++) {
                                        DepartmentFormMap departmentFormMap1 = new DepartmentFormMap();
					Map resultMap = new HashMap();
					departmentFormMap1.put("parentId", departmentList.get(i).get("id").toString());
                                        //根据id查询子节点
					List childNode = departmentService.findByNames(departmentFormMap1);
					if (childNode != null && !childNode.isEmpty()) {
						resultMap.put("isParent", true);
					} else {
						resultMap.put("isParent", false);
					}

					resultMap.put("id", departmentList.get(i).get("id"));
					resultMap.put("parentId", parentId);
					resultMap.put("name", departmentList.get(i).getStr("name"));
					mapList.add(resultMap);
				}
			}
		}
		return mapList;
	}

注：

1. 后台路径对应的是ztree里面的url参数；
2. PARENT_ID、PARENT_NAME是自己设置的常量，分别是0、机构，可根据实际情况而定；
3. 查询树节点，可以写自己的方法，主要是查询树节点下的子节点，参数是树本身ID(查询子节点时作为父节点ID，也就是数据库会有两个必要参数，id、parentId)；
4. 本示例是异步加载的情况(点击树节点时，执行一次代码)；
5. 设置List> 类型，是把树封装成可以读的结构。

附上ZtreeAPI：http://www.treejs.cn/v3/main.php#_zTreeInfo