1

我在对话框中呈现了一个 TreeView。使用对话框我有一个清除选择按钮，我的问题是如何将树视图恢复到默认的未展开状态。

目前，如果我展开树视图中的节点并点击清除按钮并再次打开对话框，树视图仍然展开。

在我的 Dailog 框 Javascript 文件的 document.ready 上，我有以下内容来初始化树视图。我应该把它放在一个函数中，然后在对话框中的清除按钮上，再次调用这个函数来重置？

JS文件

//This load the tree view on document ready

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

Clear: function () {
  $('#partTreeView :checked').removeAttr('checked');
  $("#PartDisplay").text('');
  $("#inputReps").text('');
  $("#parts").attr("style", "display:inline;");
  $("#inputParts").attr("style", "display:none;");
  PartDialog.dialog("destroy");
  //Toggle/Un-expand tree view here if already expanded here
}

查看 HTML

<!-- This div opens the dialog box -->
<div class="bodyContent"> 
  <span class="leftContent">
    @Html.Label("Select Parts")
  </span>
  <span class="rightContent">
    <span id="PartChildDialogLink" class="treeViewLink">Click here to Select Parts</span>
    <br />
    <span id="PartDisplay"></span>
    @Html.HiddenFor(model => model.PartDescription)
    <input id="ServiceEntryID" type="hidden" value="0" />
  </span>
</div>

<!-- This div contains the dialog box and the tree viwe rendered inside of it -->
<div id="partTreeView" title="Dialog Title" style="font-size: 10px; font-weight: normal; overflow: scroll; width: 800px; height: 450px; display: none;">
  <div id="parts">
    <!-- This line renders the treeview just fine -->
    @Html.RenderTree(CacheHelper.Parts(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "part")
  </div>
  <div id="inputParts" style="display: none;"></div>
  <div id="inputPartTemp" style="display: none;"></div>
</div>
4

1 回答 1

1

树视图可以有树视图control。这control由树视图脚本绑定到 3 个操作collapse tree：expand tree和toggle tree。

树视图control必须是一个包含 3 个锚链接的元素，每个操作一个。

要添加树视图，请在树视图control下方或上方添加以下 HTML：

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

如果您不希望用户能够collapse/expand/toggle并且只计划以编程方式折叠树，则可以删除锚标记之间的文本以具有“不可见”控件。

要让树视图脚本了解控件，以便将 3 个操作绑定到它，请将以下内容添加到树视图中：

$("#parts ul").treeview({
    persist: "location",
    collapsed: true,
    prerendered: false,
    control: "#myTreeviewcontrol"
});

现在要以编程方式折叠树，您只需触发 中的第一个链接control，如下所示：

$('#myTreeviewcontrol a:eq(0)').click();

演示- 以编程方式折叠树

在上面的 DEMO 中，我将文本留在了锚点中，因此您也可以根据需要使用它们。我在树的底部添加了一个按钮，单击该按钮时，将通过以编程方式触发控件的折叠链接来折叠树

应用这些更改

将这些更改应用于您的代码将涉及对您的 HTMLview 和脚本的更改。

你的观点改变：

<div id="partTreeView" title="Dialog Title" style="font-size: 10px; font-weight: normal;
            overflow: scroll; width: 800px; height: 450px; display: none;">

  <!-- You could insert Tree View Controller here -->
  <div id="myTreeviewcontrol">
    <a href="#"></a><a href="#"></a><a href="#"></a>
  </div>

  <div id="parts">
    //This line renders the treeview just fine 
    @Html.RenderTree(CacheHelper.Parts(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "part")
  </div>
  <div id="inputParts" style="display: none;"></div>
  <div id="inputPartTemp" style="display: none;"></div>
</div>

您的脚本更改：

// Let the treeview know "who" your controller is
$("#parts ul").treeview({
  persist: "location",
  collapsed: true,
  prerendered: false,
  control: "#myTreeviewcontrol" // <-- Assign id of controller to control option
});

现在您的树视图和树视图控制器已绑定，并且控制器知道单击折叠链接时要折叠的树视图。

// Tell your controller to collapse the tree
Clear: function () {
  $('#partTreeView :checked').removeAttr('checked');
  $("#PartDisplay").text('');
  $("#inputReps").text('');
  $("#parts").attr("style", "display:inline;");
  $("#inputParts").attr("style", "display:none;");
  PartDialog.dialog("destroy");
  //Toggle/Un-expand tree view here if already expanded here
  $('#myTreeviewcontrol a:eq(0)').click(); //<-- Tell the treeview controller to collaps the treeview it is bound to
}

添加最后一行会触发树视图控制器中第一个链接的单击事件，导致控制器折叠它已关联的树视图。

补充说明

树视图脚本将始终期望您指定为的元素内有 3 个链接，control并且始终以与开头提到的完全相同的顺序绑定操作。

  • 第一个链接 = 折叠树
  • 第二个链接 = 展开树
  • 第三个链接 = 切换树

查看jQuery TreeView 源代码，下面的代码显示了它是如何工作的（在函数的底部，您可以看到它是如何触发链接的）：

// factory for treecontroller
function treeController(tree, control) {
  // factory for click handlers
  function handler(filter) {
    return function () {
      // reuse toggle event handler, applying the elements to toggle
      // start searching for all hitareas
      toggler.apply($("div." + CLASSES.hitarea, tree).filter(function () {
        // for plain toggle, no filter is provided, otherwise we need to check the parent element
        return filter ? $(this).parent("." + filter).length : true;
      }));
      return false;
    };
  }
  // click on first element to collapse tree
  $("a:eq(0)", control).click(handler(CLASSES.collapsable));
  // click on second to expand tree
  $("a:eq(1)", control).click(handler(CLASSES.expandable));
  // click on third to toggle tree
  $("a:eq(2)", control).click(handler());
}
于 2013-01-14T00:53:37.243 回答