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

 

页面代码:

html:

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


注:

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

你可能感兴趣的:(js,ztree树,初始化节点,点击异步加载子节点,默认展开第一节点)