jquery异步树视图崩溃问题

时间:2010-09-04 08:36:38

标签: jquery asynchronous treeview

我使用异步jquery treeview来构建树。根据下拉列表的选择(选择输入)填充树视图。

第一次树视图加载时,一切正常。更改选择选项并构建树视图后,节点将展开但不会折叠。有没有人遇到这样的问题。我会感谢任何帮助。


$("#ddl_warehouse").bind('change', function(event) {
    $("#treeview").html("");
    var warehouse = $("#ddl_warehouse option:selected").val();
    $("#loadingdiv").unbind('ajaxStart');
    $("#treeview").treeview({ url: "Merchandise.ashx", site: warehouse, collapsed: true, unique: true });                            
    event.preventDefault();
});

function load(settings, root, child, container) {
    $.getJSON(settings.url, {
        root: root,
        site: settings.site
    }, function (response) {

        function createNode(parent) {
            if (this.id.length == 9) {
                var current = $("<li/>").attr("id", this.id || "").html("<a rel='MC' style='text-decoration:none;color:#000000;font-size:8pt' href='" + this.id + "'>" + this.text + "</a>").appendTo(parent);
            } else {
                var current = $("<li/>").attr("id", this.id || "").html("<span style='font-weight:bold '>" + this.text + "</span>").appendTo(parent);
            }
            if (this.classes) {
                current.children("span").addClass(this.classes);
            }
            if (this.expanded) {
                current.addClass("open");
            }
            if (this.hasChildren || this.children && this.children.length) {
                var branch = $("<ul/>").appendTo(current);
                if (this.hasChildren) {
                    current.addClass("hasChildren");
                    createNode.call({
                        text: "placeholder",
                        id: "placeholder",
                        children: []
                    }, branch);
                }
                if (this.children && this.children.length) {
                    $.each(this.children, createNode, [branch])
                }
            }
        }

        $.each(response, createNode, [child]);
        $(container).treeview({
            add: child
        });

        $("a[rel='MC']").bind('click', function (event) {

            var MC = $(this).attr("href");
            MCclick(MC);
            event.preventDefault();
        });
    });


}

var proxied = $.fn.treeview;

$.fn.treeview = function (settings) {
    if (!settings.url) {
        return proxied.apply(this, arguments);
    }
    var container = this;
    load(settings, "source", this, container);
    var userToggle = settings.toggle;
    return proxied.call(this, $.extend({}, settings, {
        collapsed: true,
        toggle: function () {
            var $this = $(this);
            if ($this.hasClass("hasChildren")) {
                var childList = $this.removeClass("hasChildren").find("ul");
                childList.empty();
                load(settings, this.id, childList, container);
            }
            if (userToggle) {
                userToggle.apply(this, arguments);
            }
        }
    }));
};

1 个答案:

答案 0 :(得分:0)

看看这个: http://tpeczek.com/2010/01/asynchronous-treeview-in-aspnet-mvc.html

作者提供了源的链接。我只是将脚本更改为他的版本,所有内容都开始按预期https://tpeczek.svn.codeplex.com/svn/trunk/MVC/TreeViewExample/TreeViewExample/Scripts/

开始工作