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

Question

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

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

下面的函数创建对话框1，在成功完成此对话框中的post命令后，第二个对话框和其中的treeview将不会切换。

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中定义的树形视图，在其单独的JS文件中：

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

包含树视图的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

Answer 1

我已经解决了这个问题，如果您存储.html()，然后在再次添加它之后，再次重新绑定该插件，则状态是kind-off around。

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

-存储超文本标记语言、删除树、添加新树、设置超文本标记语言并重新绑定treeView

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

单击store/remove/attach按钮时，将执行以下操作：

它会记住树的状态，如果树被折叠，它会呈现折叠，它会展开，它会呈现展开。

除了默认的闭合元素(文件3)，因为close类将在第一次呈现时重新应用。

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

演示中的代码

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