记录学习异步ztree

可能会报一个错误，是因为加载了两次jquery文件导致，网上有很多帖子，解决办法是：通过审查元素可以看到加载了两次jquery文件，删除掉一个就行了

直接从后台传递数据进行异步加载，静态数据直接看官方示例

//setting4是这样的参数是必须的，名字随意，与下面的ztree实例化参数一致就可以，具体每个参数的详细意义可以查看官方文档

var setting4 = {
        data: {
            simpleData: {
                enable: true,

               //后台传递过来的数据中用于作为id的字段
                idKey: "id",

               //后台传递过来的数据中用于作为parentid的字段
                pIdKey: "pId",
                rootPId: 0
            },
            key: {

                //每个节点中都会有title这个属性，也有默认值，这里将title属性的值变为后台传递过来的id值，可以方面节点的标志跟后期的节点选择
                title: "id"
            }
        },
        async: {
            //开启异步加载
            enable: true,

            //向后台服务器端请求的网址
            url: "/Department/GetTreeMenu",

            异步加载每次加载完一次之后如果点击加载下一级的子节点，就会自动发出url请求，这个autoparam就会将上次传递过来的id,ShowFlag,DelFlag字段信息作为url参数，再次发起请求
            autoParam: ["id", "ShowFlag", "DelFlag"],

            //请求类型为json
            dataType: "json"
        },

        //绑定回调事件，具体的每个事件可以参考官方文档，其中onClick事件是当节点被点击的时候触发
        callback: {
            beforeExpand: beforeExpand,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onClick: onClick
        }
    };

 

    function beforeExpand(treeId, treeNode) {
        if (!treeNode.isAjaxing) {
            return true;
        } else {
            alert("zTree 正在下载数据，请稍后展开节点。。。");
            return false;
        }
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        //alert("进入异步加载");
    }
    function onAsyncError() {
        alert("数据加载失败");
    }
    function onClick(e, treeId, treeNode) {

        //通过这个参数可以获取每个节点的ID
        var tId = treeNode.tId;
        var nodeid = tId + "_a";

        以下是我对个人对服务器端获取信息的需求操作，不是ztree中的组成部分
        $('input[name="id_hidden"]').val($("#" + nodeid).attr("title"));
        //通过id查询出详细信息
        $.ajax({
            url: "/Department/GetOneInfo",
            dataType: "json",
            type: "POST",
            data: { id: $('input[name="id_hidden"]').val() },
            success: function (data) {
                var ajaxobj = eval("(" + data + ")");
                $('input[name="id"]').val(ajaxobj.id);
                $('input[name="name"]').val(ajaxobj.name);
                $('input[name="parentid"]').val(ajaxobj.pId);
                $('input[name="showflag"]').val(ajaxobj.ShowFlag);
                $('input[name="delflag"]').val(ajaxobj.DelFlag);
                $('input[name="createtime"]').val(ajaxobj.CreateTime);
            },
        });
    }

 

    $(function () {

        //创建树
        createTree();
    })

    //具体的数据创建方法，这个方法中的ajax只是在树的第一次创建的时候执行一次，获取到数据之后再交给刚刚被初始化出来的树，以后每次对服务器端的自动请求都定义在async中
    function createTree() {
        $.ajax({
            url: "/Department/GetTreeMenu",
            data: { "id": id_hidden, "ShowFlag": select_showflag, "DelFlag": select_delflag },
            type: 'POST',
            dataType: "text",
            success: function (data) {

                //对后台返回的信息进行转换，不可省略
                data = eval('(' + data + ')');
                data = eval('(' + data + ')');

                //树的初始化，是ztree中对树初始化的标准方法，其中的参数是我们在上面定义的参数
                $.fn.zTree.init($("#tree"), setting4, data);
            },
            error: function (msg) {
                alert("数据加载失败！" + msg);
            }
        });
    }