jQuery树视图节点在ajax调用后将不会切换 [英] Jquery treeview nodes will not toggle after an ajax call

问题描述

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

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.

问题是我从对话框1的复选框列表中选择并单击UpdatePage按钮后，我的模型得到更新就好了.但是，包含树视图和另一个checbobox列表/节点的第二个对话框将根本不会切换.但是，它确实保留了其先前的状态:选中了先前选中的复选框，但根本不会切换.

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，并且成功完成此对话框中的post命令后，第二个对话框和其中的树形视图将不会切换.

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.

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

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

Treeview defined in dialog box 2, in its seperate JS file:

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

包含树形视图的div的HTML:

The HTML for The div which contains the tree view:

<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

推荐答案

我对此有一个解决方法，如果您存储.html()，然后再次添加它，请再次将插件重新绑定，状态被友善记住.

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.

我使用了我为最后一个问题创建的小提琴中的代码，并对其进行了稍微的更新.

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

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

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

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

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.

点击store/remove/attach按钮将执行以下操作:

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

• 存储ul元素(即树视图)的HTML
• 删除ul元素
• 重新添加一个新的ul元素
• 将原始HTML添加到新的ul
• 将ul重新绑定到treeview插件

• store the HTML of the ul element which is the treeview
• remove the ul element
• re-add a new ul element
• adds the original HTML to the new ul
• re-bind the ul to the treeview plugin

它会记住状态，如果树倒塌了，它将渲染塌陷并展开，然后渲染展开.

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

除了默认的封闭元素(文件3)外，close类将在首次渲染时重新应用.

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

除此之外，看起来还可以.

Other than that it looks OK.

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>

脚本

$("#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

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

这篇关于jQuery树视图节点在ajax调用后将不会切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！