0

我的视图中有两个对话框。这些对话框中的每一个都有 ajax 命令，例如第一个执行 a POST，第二个执行 a 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");
    }

在对话框 2 中定义的 Treeview，在其单独的 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
4

1 回答 1

1

我对此进行了尝试，如果您存储它.html()，然后再次添加它，再次重新绑定插件，状态会被记住。

我使用了为您的最后一个问题创建的小提琴中的代码并稍微更新了它。

DEMO - 存储 HTML、删除树、添加新树、设置 HTML 和重新绑定树视图

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

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

  • ul存储作为树视图的元素的 HTML
  • 移除ul元素
  • 重新添加一个新ul元素
  • 将原始 HTML 添加到新的ul
  • 重新绑定ul到treeview插件

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

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

除此之外，它看起来还可以。

来自 DEMO 的代码

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;
}
于 2013-01-17T01:22:59.910 回答