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<nodes.length;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<Map<String, Object>> queryChildNodeTree(Integer parentId) {
  List<Map<String, Object>> mapList = new ArrayList<Map<String, Object>>();
  // 首次加载设置根节点
  if (parentId == null) {
         Map<String, Object> resultMap = new HashMap<String, Object>();
             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<DepartmentFormMap> departmentList = departmentService.findByNames(departmentFormMap);
            if (!departmentList.isEmpty()) {
                for (int i = 0; i < departmentList.size(); i++) {
                                        DepartmentFormMap departmentFormMap1 = new DepartmentFormMap();
                    Map<String, Object> resultMap = new HashMap<String, Object>();
                    departmentFormMap1.put("parentId", departmentList.get(i).get("id").toString());
                                        //根据id查询子节点
                    List<DepartmentFormMap> 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;
    }

注：

后台路径对应的是ztree里面的url参数；
PARENT_ID、PARENT_NAME是自己设置的常量，分别是0、机构，可根据实际情况而定；
查询树节点，可以写自己的方法，主要是查询树节点下的子节点，参数是树本身ID(查询子节点时作为父节点ID，也就是数据库会有两个必要参数，id、parentId)；
本示例是异步加载的情况(点击树节点时，执行一次代码)；
设置List<Map<String, Object>> 类型，是把树封装成可以读的结构。
附上ZtreeAPI：http://www.treejs.cn/v3/main.php#_zTreeInfo
--------------------- 
作者：坚持并奋斗 
来源：CSDN 
原文：https://blog.csdn.net/qq_38236927/article/details/80044064