在ajax调用之后，Jquery treeview节点不会切换
我的视图中有两个对话框。 这些对话框中的每一个都有ajax命令，例如第一个执行POST ，第二个执行LOAD 。
问题是在我从对话框1中的复选框列表中选择并点击UpdatePage按钮后，我的模型得到了更新。 但是，包含具有另一个checbobox列表/节点的树视图的第二个对话框将不会切换。 它确实保留了以前的状态：检查选中的复选框，但它根本不会切换。
以下函数创建对话框1，并且在此对话框中成功完成post命令后，第二个对话框和其中的树视图将不会切换。
function initDailog() { RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: true, modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields & Test Exceptions:', width: 600, height: 500, position: 'center', open: function (type, data) { }, buttons: { UpdatePage: function () { //storing the value of treeview selections in dialog box 2 var originalContent = $("#treeview").html(); $.post(runDatesUrl, $("#form").serialize(), function (data) { $("#runDatestreeview").remove(); //removing the div which contains the treeview $("#treeview").remove(); $("#testExceptiontreeview").remove(); $("#main").html(data); //setting back the value of the div which contains the treeview $("#treeview").html(originalContent); }, "html"); }, Cancel: function () { $(this).dialog("close"); } } }); RunDialog.closest("div.ui-dialog").appendTo("#form"); }
Treeview在对话框2中定义，在其单独的JS文件中：
$("#errorCodes ul").treeview({ collapsed: true, prerendered: false });
包含树视图的div的HTML：
@Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e") </div
我已经玩过这个游戏，如果你存储了.html()然后再添加它，再次重新绑定插件，状态就会被记住了。
我使用了我为你的上一个问题创建的小提琴代码并略微更新了它。
演示 – 存储HTML，删除树，添加新树，设置HTML并重新绑定treeView
在上面的DEMO中，我在加载时绑定树视图，折叠/展开树视图，然后点击store/remove/attach按钮。 之后，树看起来像以前一样，折叠/展开/切换仍然有效。
单击时， store/remove/attach按钮将执行以下操作：
- 存储
ul元素的HTML，即树视图
- 删除
ul元素
- 重新添加一个新的
ul元素
- 将原始HTML添加到新的
ul
- 将
ul重新绑定到treeview插件
它记住了状态，如果树被折叠，它渲染折叠并扩展它渲染展开。
除了默认的闭合元素（文件3），因为close类将在它第一次渲染时重新应用。
除此之外它看起来还不错。
来自DEMO的代码
HTML
- Folder 1
- Item 1.1
- Folder 2
- Subfolder 2.1
- File 2.1.1
- File 2.1.2
- File 2.2
- Folder 3 (closed at start)
- File 3.1
- File 4
脚本
$("#tree").treeview({ control: "#treeviewcontrol", prerendered: false }); $("#cloneTree").click(function () { var $tree = $("#tree"); var originalHtml = $tree.html(); $tree.remove(); var newBrowser = $('
') newBrowser.html(originalHtml); $("body").append(newBrowser); $("#tree").treeview({ control: "#treeviewcontrol", prerendered: false }); });
CSS
.treeview, .treeview ul { padding: 0; margin: 0; list-style: none; } .treeview ul { background-color: white; margin-top: 4px; } .treeview .hitarea { background: url(images/treeview-default.gif) -64px -25px no-repeat; height: 16px; width: 16px; margin-left: -16px; float: left; cursor: pointer; } /* fix for IE6 */ * html .hitarea { display: inline; float:none; } .treeview li { margin: 0; padding: 3px 0pt 3px 16px; } .treeview a.selected { background-color: #eee; } #treecontrol { margin: 1em 0; display: none; } .treeview .hover { color: red; cursor: pointer; } .treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; } .treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; } .treeview .expandable-hitarea { background-position: -80px -3px; } .treeview li.last { background-position: 0 -1766px } .treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); } .treeview li.lastCollapsable { background-position: 0 -111px } .treeview li.lastExpandable { background-position: -32px -67px } .treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; } .treeview-red li { background-image: url(images/treeview-red-line.gif); } .treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } .treeview-black li { background-image: url(images/treeview-black-line.gif); } .treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); } .treeview-gray li { background-image: url(images/treeview-gray-line.gif); } .treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } .treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); } .treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } .treeview .placeholder { background: url(images/ajax-loader.gif) 0 0 no-repeat; height: 16px; width: 16px; display: block; } .filetree li { padding: 3px 0 2px 16px; } .filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; } .filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; } .filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; } .filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }