ztree异步加载

首先页面要引入ztree 的css、js

然后ztree setting 中的 async、data

页面加载完成，请求后端接口 获取 一部分 初始数据–>初始化ztree

ztree setting 中的 callback其实什么都不配置就可以异步加载了（beforeAsync,onAsyncSuccess这两个都不用配置），点击父节点 ztree异步向后端请求到数据自己会完成追加子节点。

前端代码示例：

<link href="/ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css"  type="text/css"/>
<script src="/ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
    ///lizux///liuzx///lizux///liuzx///lizux///liuzx///
    var treeObj=null;
    // function filter(treeId, parentNode, childNodes) {
    //     // if (!childNodes) return null;
    //     // for (var i=0, l=childNodes.length; i<l; i++) {
    //     //  childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
    //     // }
    //     // return childNodes;
    // }
    // function beforeClick(treeId, treeNode) {
    //     if (!treeNode.isParent) {
    //         alert("请选择父节点");
    //         return false;
    //     } else {
    //         return true;
    //     }
    // }
    // function ztreeBeforeExpand(treeId, treeNode) {
    //     if (!treeNode.isAjaxing) {
    //         startTime = new Date();
    //         treeNode.times = 1;
    //         ajaxGetNodes(treeNode, "refresh");
    //         return true;
    //     } else {
    //         alert("zTree 正在下载数据中，请稍后展开节点。。。");
    //         return false;
    //     }
    // }
    //异步请求之前 判断 ---begin---
    function ztreeBeforeAsync(treeId, treeNode) {
        //alert("beforeAsync...");
        //console.log(treeObj.getNodes());
        return treeNode.isParent;
    };
    //异步请求之前 判断---over---
    //异步请求成功后执行的加载节点方法---begin---
    function ztreeOnAsyncSuccess(event, treeId, treeNode, msg){
        //alert("onAsyncSuccess...");
        //treeObj.updateNode(treeNode);
        //treeObj.addNodes(treeNode,msg);
        //console.log(treeObj.getNodes());

        // if (msg != null && msg.length != 0) {
        //     var data = msg;
        //         if(treeNode == undefined){
        //             treeObj.addNodes(null,data,true);// 如果是根节点，那么就在null后面加载数据
        //         }else{
        //             treeObj.addNodes(treeNode,data,true);//如果是加载子节点，那么就是父节点下面加载
        //         }
        //     treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
        // }

    };
    function ztreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        alert("AsyncError");
    }
    //异步请求成功后执行的加载节点方法---over---

    //获取多选框选中节点的id，筛选用户ID，拼接到 页面隐藏参数中
    function ztreeOnCheck(e, treeId, treeNode) {
        var nodes = treeObj.getCheckedNodes(true),v = "";
        for (var i = 0; i < nodes.length; i++) {
            // 筛选得出用户id !nodes[i].isParent && 
            if (!nodes[i].isParent && nodes[i].id.length > 1) {
                //以后将id换成别名  直接传到后台推送
                v += nodes[i].id + ",";
            }
            // 给隐藏标签赋值
            $("#ids").val(v);
        }
    }

    //ztree setting ---begin---
    var setting = {
        async: {
          enable: true,
          url:"${ctx}/userdata/fyAnnouncement/treeData",
          autoParam:["id=itype"],
        },
        view: {
          dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
          showLine: true,//是否显示节点之间的连线
          fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
          selectedMulti: false //设置是否允许同时选中多个节点
        },
        check:{
          chkboxType: { "Y": "s", "N": "ps" },
          chkStyle: "checkbox",//复选框类型
          enable: true //每个节点上是否显示 CheckBox
        },
        data: {
          simpleData: {//简单数据模式
            enable:true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
          }
        },
        callback: {
            //beforeExpand: zTreeBeforeExpand,
            beforeAsync: ztreeBeforeAsync,
            onAsyncSuccess: ztreeOnAsyncSuccess,
            onAsyncError: ztreeOnAsyncError,
            onCheck: ztreeOnCheck
        }
    };
    //ztree setting ---over---

    //页面加载完成，ztree init---begin---
    $(function () {
        $.getJSON("${ctx}/userdata/fyAnnouncement/treeData",function(data){
            $.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
            treeObj = $.fn.zTree.getZTreeObj("ztree");
        });

        /* $.ajax({
            url: '${ctx}/userdata/fyAnnouncement/treeData',
            type: 'get',
            dataType: 'json',
            success: function (data) {
             $.fn.zTree.init($("#ztree"), setting, data);
            }
        }); */
    });
    //页面加载完成，ztree init---over---
    ///lizux///liuzx///lizux///liuzx///lizux///liuzx///

        // 推送ajax
        $('#btnSubmit').click(function(){
         $.ajax({
             type: "POST",
             url: "${ctx}/userdata/fyAnnouncement/tuisong",
             data: {ids:$("#ids").val(),id:$("#AnnoId").val()},
             dataType: "json",
             success: function(data){
                alert(data.msg);
             }
         });
    });
    </script>

后端springmvc controller代码示例：

    @ResponseBody
    @RequestMapping(value = "treeData")
    public List<Map<String, Object>> treeData(@RequestParam(required=false) String itype) {
        List<Map<String, Object>> mapList = Lists.newArrayList();
        //默认返回数据
        if (StringUtils.isBlank(itype)) {
            Map<String, Object> top = Maps.newHashMap();
            top.put("name", "全部");
            top.put("id", 0);
            top.put("isParent", true);
            top.put("pId", -1);
            mapList.add(top);
            for(int i=1; i<7; i++){
                Map<String, Object> map = Maps.newHashMap();
                map.put("id", i);
                if(i==1){
                    map.put("name", "医生");
                }else if(i==2){
                    map.put("name", "药师");
                }else if(i==3){
                    map.put("name", "护士");
                }else if(i==4){
                    map.put("name", "医学院教师");
                }else if(i==5){
                    map.put("name", "学生");
                }else if(i==6){
                    map.put("name", "其他");
                }
                map.put("isParent", true);
                map.put("pId", 0);
                mapList.add(map);
            }
        }else {
            FyWebuser user=new FyWebuser();
            user.setIstatus(Integer.parseInt(status));
            user.setItype(Integer.valueOf(itype));
            List<FyWebuser> list = fyWebuserService.findList(user);
            list.forEach((webUser) ->{
                if(webUser.getItype()!=null){
                    if(null != webUser.getItype()){
                        Map<String, Object> map = Maps.newHashMap();
                        map.put("id", webUser.getId());
                        map.put("name", webUser.getUserName());
                        map.put("pId", itype);
                        map.put("isParent", false);
                        mapList.add(map);
                    }
                }
            });
        }
        return mapList;
    }