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は、アクションごとに1つずつ、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();

デモ-プログラムでツリーを折りたたむ

上記のデモでは、テキストをアンカーに残したので、必要に応じてそれらを使用することもできます。ツリーの下部にボタンを追加しました。クリックすると、プログラムでコントロールの折りたたみリンクがトリガーされ、ツリーが折りたたみます。

それらの変更を適用する

これらの変更をコードに適用するには、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し、最初に述べたのとまったく同じ順序でアクションを常にバインドします。

  • 1番目のリンク=折りたたみツリー
  • 2番目のリンク=ツリーを展開
  • 3番目のリンク=トグルツリー

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 に答える