在ajax调用之后，Jquery treeview节点不会切换

I have two dialog boxes within my view. Each of these dialog boxes have ajax commands within them for instance the first one does a POST and second one does a LOAD.

我的视图中有两个对话框。这些对话框中的每一个都有ajax命令，例如第一个执行POST，第二个执行LOAD。

The issue is after I select from a checkbox list in dialog box 1 and hit UpdatePage button, my model gets updated just fine. However, The second dialog box containing the tree view with another checbobox list/nodes will not toggle at all. It does retain its previous state though: The checkboxes selected previosuly are checked but it will not toggle at all.

问题是在我从对话框1中的复选框列表中选择并点击UpdatePage按钮后，我的模型得到了更新。但是，包含具有另一个checbobox列表/节点的树视图的第二个对话框将不会切换。它确实保留了以前的状态：检查选中的复选框，但它根本不会切换。

The following function creates the dialog box 1 and upon successful completion of the post command in this dialog box that the second dialog box and the treeview within, will not toggle.

以下函数创建对话框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 defined in dialog box 2, in its seperate JS file:

Treeview在对话框2中定义，在其单独的JS文件中：

$("#errorCodes ul").treeview({
collapsed: true,
prerendered: false
});

The HTML for The div which contains the tree view:

包含树视图的div的HTML：

<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 800px; height: 450px; display: none;">
    <div id="errorCodes">
        @Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
    </div>
    <div id="inputReps" style="display: none;">
    </div>
</div

1 个解决方案

#1

I have had a play-around with this and if you store the .html() and then after adding it again, re-bind the plugin again, the state is kind-off remembered.

我已经玩过这个游戏，如果你存储了.html（）然后再添加它，再次重新绑定插件，状态就会被记住了。

I used the code from the fiddle I created for your last question and slightly updated it.

我使用了我为你的上一个问题创建的小提琴代码并略微更新了它。

---

DEMO - Store HTML, remove Tree, Add new Tree, set HTML and rebind treeView

演示 - 存储HTML，删除树，添加新树，设置HTML并重新绑定treeView

---

In the above DEMO I'm binding the treeview on load, collapse/expand the tree view and then hit the store/remove/attach button. After that the tree looks as before and collapse/expand/toggle still work.

在上面的DEMO中，我在加载时绑定树视图，折叠/展开树视图，然后点击store / remove / attach按钮。之后，树看起来像以前一样，折叠/展开/切换仍然有效。

The store/remove/attach button will do the following when clicked:

单击时，存储/删除/附加按钮将执行以下操作：

• store the HTML of the ul element which is the treeview
• 存储ul元素的HTML，即树视图
• remove the ul element
• 删除ul元素
• re-add a new ul element
• 重新添加一个新的ul元素
• adds the original HTML to the new ul
• 将原始HTML添加到新的ul
• re-bind the ul to the treeview plugin
• 将ul重新绑定到treeview插件

It remembers the state, if the tree was collapsed, it renders collapsed and expanded it renders expanded.

它记住了状态，如果树被折叠，它渲染折叠并扩展它渲染展开。

Except for the default closed element (File 3) as the close class will be re-applied the first time it renders.

除了默认的闭合元素（文件3），因为close类将在它第一次渲染时重新应用。

Other than that it looks OK.

除此之外它看起来还不错。

---

Code from DEMO

---

HTML

HTML

<div id="treeviewcontrol"> <a href="#"> collapse </a><a href="#"> expand </a><a href="#"> toggle </a>

</div>
<ul id="tree" class="filetree">
  <li><span class="folder">Folder 1</span>

    <ul>
      <li><span class="file">Item 1.1</span>

      </li>
    </ul>
  </li>
  <li><span class="folder">Folder 2</span>

    <ul>
      <li><span class="folder">Subfolder 2.1</span>

        <ul id="folder21">
          <li><span class="file">File 2.1.1</span>

          </li>
          <li><span class="file">File 2.1.2</span>

          </li>
        </ul>
      </li>
      <li><span class="file">File 2.2</span>

      </li>
    </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>

    <ul>
      <li><span class="file">File 3.1</span>

      </li>
    </ul>
  </li>
  <li><span class="file">File 4</span>

  </li>
</ul>
<button id="cloneTree" type="button">Store/Remove/Attach Tree</button>

Script

脚本

$("#tree").treeview({
  control: "#treeviewcontrol",
  prerendered: false
});

$("#cloneTree").click(function () {
  var $tree = $("#tree");
  var originalHtml = $tree.html();

  $tree.remove();

  var newBrowser = $('<ul id="tree" class="filetree"></ul>')

  newBrowser.html(originalHtml);
  $("body").append(newBrowser);

  $("#tree").treeview({
    control: "#treeviewcontrol",
    prerendered: false
  });
});

CSS

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;
}