求教：敢于ajax异步加载数据的问题。

Question

这是那个 js 方法//弹出窗口
function OpenAlertWindow(dv, txt, hid, hname, url) {
    var $win = $("#" + dv).window({
        shadow: true,
        modal: true,
        closed: true,
        minimizable: true,
        maximizable: true,
        collapsible: true
    });    $("#" + dv).empty();    var iframe_url = "<iframe width='100%' height='100%' frameborder='0' scrolling='auto' src='";
    iframe_url += url + "?dv=" + dv + "&txt=" + txt + "&hid=" + hid + "&hname=" + hname;
    iframe_url += "'></iframe>";
    $("#" + dv).append(iframe_url);    $("#" + dv).window("open");
}
//关闭窗口
function CloseAlertWindow(v) {
    $("#" + v).window("close");
}//获取url参数
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}//以下代码是生成树
var zNodes;//数据源
var treedemo;//承载树的控件名称
var searchdemo;//查找节点文本框控件名称
var resultdemo;//接收选择节点返回值控件名称
var hiddemo;//接收节点ID控件名称
var hnamedemo;//接收节点值控件名称
var ktitle;//树标题
var kname;//节点值关键字
var dvname;//弹出窗口名称
var resultstr;//获取返回值function initTree(treedata, demo, txtdemo, rdemo, hid, hname, dv) {
    zNodes = treedata;
    treedemo = demo;
    searchdemo = txtdemo;
    resultdemo = rdemo;
    hiddemo = hid;
    hnamedemo = hname;
    dvname = dv;
}
var setting = {
    data: {
        key: {
            title: "t"
        },
        simpleData: {
            enable: true
        }
    },
    view: {
        showLine: true,
        fontCss: getFontCss,
        dblClickExpand: dblClickExpand
    },
    callback: {
        beforeDblClick: zTreeBeforeDblClick,
        //onDblClick: zTreeOnDblClick,
        //onClick: onClick
    }
};var log, className = "dark";
function beforeClick(treeId, treeNode, clickFlag) {
    className = (className === "dark" ? "" : "dark");
    showLog("[ " + getTime() + " beforeClick ]&nbsp;&nbsp;" + treeNode.name);
    return (treeNode.click != false);
}
function zTreeBeforeDblClick(treeId, treeNode) {
    if (treeNode != null && treeNode != 'undefined') {
        if (!treeNode.isParent) {
            resultstr = treeNode.id + "," + treeNode.name;            window.parent.$("#" + hiddemo).val(treeNode.id);
            window.parent.$("#" + hnamedemo).val(treeNode.name);
            window.parent.$("#" + resultdemo).val(treeNode.name);
            //window.returnValue = $("#hidId").val() + "|" + $("#hidName").val();
            //alert($("#hidId").val() + "|" + $("#hidName").val());
            //window.close();
            window.parent.$("#" + dvname).window("close");
        } else {
            alert("请选择最末级节点");
        }
    }
}function zTreeOnDblClick(treeId, treeNode) {
    
}function onClick(event, treeId, treeNode, clickFlag) {
    //showLog("[ " + getTime() + " onClick ]&nbsp;&nbsp;clickFlag = " + clickFlag + " (" + (clickFlag === 1 ? "普通选中" : (clickFlag === 0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");
    //window.close();
}
function showLog(str) {
    if (!log) log = $("#log");
    log.append("<li class='" + className + "'>" + str + "</li>");
    if (log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
    }
}
function getTime() {
    var now = new Date(),
    h = now.getHours(),
    m = now.getMinutes(),
    s = now.getSeconds();
    return (h + ":" + m + ":" + s);
}function dblClickExpand(treeId, treeNode) {
    return treeNode.level > 0;
}function focusKey(e) {
    if (key.hasClass("empty")) {
        key.removeClass("empty");
    }
}
function blurKey(e) {
    if (key.get(0).value == "") {
        key.addClass("empty");
    }
}var lastValue = "", nodeList = [], fontCss = {};
function SearchNode(e) {
    var zTree = $.fn.zTree.getZTreeObj(treedemo);
    //var key=$("#txtNodeSearch");    var value = $.trim(key.get(0).value);
    var keyType = "name";    if (lastValue == value) return;
    lastValue = value;
    if (value == "") return;
    updateNodes(false);    nodeList = zTree.getNodesByParamFuzzy("name", value, null);
    updateNodes(true);
}function updateNodes(highlight) {
    var zTree = $.fn.zTree.getZTreeObj(treedemo);
    for (var i = 0, l = nodeList.length; i < l; i++) {
        nodeList[i].highlight = highlight;
        zTree.updateNode(nodeList[i]);
    }
}
function getFontCss(treeId, treeNode) {
    return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
}
function filter(node) {
    return !node.isParent && node.isFirstNode;
}function getSecletNode(treedemo) {
    var zTree = $.fn.zTree.getZTreeObj(treedemo);
    var node = zTree.getSelectedNodes(true);    return node;
}var key;
$(document).ready(function () {
    var treeObj = $.fn.zTree.init($("#" + treedemo), setting, zNodes);
    treeObj.expandAll(true);
    key = $("#" + searchdemo);
    key.bind("focus", focusKey)
    .bind("blur", blurKey)
    .bind("propertychange", SearchNode)
    .bind("input", SearchNode);});

Answer 1

这是返回的数据[{"id":"001","pId":"#","name":"基本户","t":"基本户"},{"id":"001001","pId":"001","name":"个人基本户","t":"个人基本户"},{"id":"001001001","pId":"001001","name":"个人工资账户","t":"个人工资账户"},{"id":"001002","pId":"001","name":"个人养老保险账户","t":"个人养老保险账户"},{"id":"001002001","pId":"001002","name":"公司养老保险","t":"公司养老保险"},{"id":"002","pId":"#","name":"一般户","t":"一般户"},{"id":"002001","pId":"002","name":"一般个人账户","t":"一般个人账户"},{"id":"002001001","pId":"002001","name":"家庭用户","t":"家庭用户"},{"id":"002001002","pId":"002001","name":"小孩专户","t":"小孩专户"},{"id":"003","pId":"#","name":"特点专户","t":"特点专户"},{"id":"004","pId":"#","name":"保证金户","t":"保证金户"},{"id":"004001","pId":"004","name":"个人保证金账户","t":"个人保证金账户"},{"id":"004002","pId":"004","name":"企业保证金账户","t":"企业保证金账户"}]

Answer 2

async: false,加这个取消异步

Answer 3

我把代码改了下，主要改的那个js里面的，就可以了var key;
function InitData() {
    var treeObj = $.fn.zTree.init($("#" + treedemo), setting, zNodes);
    treeObj.expandAll(true);
    key = $("#" + searchdemo);
    key.bind("focus", focusKey)
    .bind("blur", blurKey)
    .bind("propertychange", SearchNode)
    .bind("input", SearchNode);
}把js初始的ready给去掉了，然后，每次调用，都加载一次，就是不知道有啥弊端。function initTree(treedata, demo, txtdemo, rdemo, hid, hname, dv) {
    zNodes = treedata;
    treedemo = demo;
    searchdemo = txtdemo;
    resultdemo = rdemo;
    hiddemo = hid;
    hnamedemo = hname;
    dvname = dv;    InitData();
}

Answer 4

function initTree(treedata, demo, txtdemo, rdemo, hid, hname, dv) {
    zNodes = treedata;
    treedemo = demo;
    searchdemo = txtdemo;
    resultdemo = rdemo;
    hiddemo = hid;
    hnamedemo = hname;
    dvname = dv;    InitData();
}

Answer 5

参考：<script type="text/javascript">
        $(document).ready(function () {
            //ajax请求数据
            $.ajax(
                          {
                              url: "GetMoudelList.ashx",
                              type: "post",
                              dataType: "json",
                              success: function (data) {
                                  $.fn.zTree.init($("#MoudleTree"), setting, data);
                                  setEdit();
                              },
                              error: function (XMLHttpRequest, textStatus, errorThrown) {
                                  alert("status:" + XMLHttpRequest.status + "  readyState:" + XMLHttpRequest.readyState + "  textStatus:" + textStatus);
                              }
                          });        });        var setting = {
            edit: {
                enable: true,
                showRenameBtn: showRenameBtn,
                showRemoveBtn: showRemoveBtn
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeEditName: beforeEditName            }
        };
        function showRenameBtn(treeId, treeNode) {
            return !(treeNode.pId == null);
        }        function showRemoveBtn(treeId, treeNode) {
            return false;
        }        var log, className = "dark";
        function beforeEditName(treeId, treeNode) {
            className = (className === "dark" ? "" : "dark");
            var zTree = $.fn.zTree.getZTreeObj("MoudleTree");
            zTree.selectNode(treeNode);
            if (confirm("进入菜单-- " + treeNode.name + " 的编辑状态吗？")) {
                if (treeNode.pId == 1) {
                    window.location.href = 'MoudleEditExt.aspx?ID=' + treeNode.id;
                } else {
                    window.location.href = 'MoudleEdit.aspx?ID=' + treeNode.id;
                }            }
        }
        function getTime() {
            var now = new Date(),
h = now.getHours(),
m = now.getMinutes(),
s = now.getSeconds(),
ms = now.getMilliseconds();
            return (h + ":" + m + ":" + s + " " + ms);
        }        function beforeDrag(treeId, treeNodes) {
            return false;
        }        function setEdit() {
            var zTree = $.fn.zTree.getZTreeObj("MoudleTree");
            //zTree.setting.edit.showRemoveBtn = true;
            //zTree.setting.edit.removeTitle = '删除';
            zTree.setting.edit.renameTitle = '编辑';
        }
    </script>
 /// <summary>
    /// GetMoudelList 的摘要说明
    /// </summary>
    public class GetMoudelList : IHttpHandler, IRequiresSessionState
    {        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            SecurityMoudleService services = new SecurityMoudleService();
            var moudleList = services.GetAll().OrderBy(x => x.ORDER).ToList();
            var list = moudleList.Select(n => new MoudleExt(n));
            var treeString = JsonConvert.SerializeObject(list, Newtonsoft.Json.Formatting.Indented);
            context.Response.Write(treeString);
        }        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }    public class MoudleExt
    {
        public MoudleExt(Model.SECURITY_MOUDLE moudle)
        {
            this.id = moudle.SECURITY_MOUDLE_ID;
            this.pId = moudle.PARENTID;
            this.name = moudle.NAME;
            if (this.pId == 0)
            {
                this.open = true;
            }
        }        public int id { get; set; }
        public int pId { get; set; }
        public string name { get; set; }
        public bool open { get; set; }
        public int order { get; set; }    }

Answer 6

    <div class="zTreeDemoBackground left">
            <ul id="MoudleTree" class="ztree"></ul>
        </div>
JS 代码  
后台代码
HTML代码

Answer 7

好久没用过ztree了，看着眼晕啊

Answer 8

ajax使用同步加载 ajax有返回值后加载ztree
ajax如果异步，则加载ztree的时候没有获取ajax的返回值，所以是空的