Wijmo Tree：通过 Value 来选择节点

Wijmo Tree 可以把数据通过树形结构展示出来。同时，它提供 展开、折叠 动画效果、丰富的主题样式以及 drag-and-drop 功能等。

该插件的 findNodeByText 方法可以通过 Node 的 Text 属性选择节点。但是，目前没有提供通过 Value 选择节点的方法。

在这篇文章中，我们将向大家展示如何通过 Value 来选择或删除特定 Node。

如何创建 WijTree，请参考：http://wijmo.com/wiki/index.php/Tree#Wijtree_Full_Markup_and_Scripting，使用标签如下：

<ul id="tree">
  <li value="100" title="Value 100"><a><span>Folder 1</span></a>
    <ul>
      <li value="101" title="Value 101"><a><span>Folder 1.1</span></a></li>
      <li value="102" title="Value 102"><a><span>File 1.2</span></a></li>
      <li value="103" title="Value 103"><a><span>File 1.3</span></a></li>
      <li value="104" title="Value 104"><a><span>File 1.4</span></a></li>
      <li value="105" title="Value 105"><a><span>File 1.5</span></a></li>
    </ul>
  </li>
  <li value="200" title="Value 200"><a><span>Folder 2</span></a>
    <ul>
      <li value="201" title="Value 201"><a><span>File 2.1</span></a></li>
      <li value="202" title="Value 202"><a><span>File 2.2</span></a></li>
      <li value="203" title="Value 203"><a><span>File 2.3</span></a></li>
      <li value="204" title="Value 204"><a><span>File 2.4</span></a></li>
      <li value="205" title="Value 205"><a><span>File 2.5</span></a></li>
    </ul>
  </li>
  <li value="300" title="Value 300"><a><span>Folder 3</span></a>
    <ul>
      <li value="301" title="Value 301"><a><span>File 3.1</span></a></li>
      <li value="302" title="Value 302"><a><span>File 3.2</span></a></li>
      <li value="303" title="Value 303"><a><span>File 3.3</span></a></li>
      <li value="304" title="Value 304"><a><span>File 3.4</span></a></li>
      <li value="305" title="Value 305"><a><span>File 3.5</span></a></li>
    </ul>
  </li>
</ul><script type="text/javascript">
$(document).ready(function () {
   //make the ul list as WijTree
    $("#tree").wijtree({ showExpandCollapse: false });
});

选择节点：

选择节点的方法为，首先我们需要获取所有的 li 标签，然后遍历 li 标签的 Value，进而选择该标签：

//handle Select button
$("#btnSelect").click(function (e) {
  //get the enter value
  var valueToSearch = $("#txtUser").val();
  //called the custom method to select
  SelectNodeByValue(valueToSearch);
});

//handle the enter key of textbox
$("#txtUser").keyup(function (e) {
  if (e.keyCode == 13) {
    var valueToSearch = $("#txtUser").val();
    SelectNodeByValue(valueToSearch)
  }
});

function SelectNodeByValue(val) {
  //get the list of li tags in WijTree
  var li_treeNodes = $(".wijmo-wijtree-list").find('li');

  //filter this collection on basis of entered value
  var node = li_treeNodes.filter(function (index) {
    return $(this).val() == val;
  });
  //select the retrieved node
  $(node).wijtreenode({ selected: true });
}

删除节点：

删除节点的方法为，首先我们需要获得含有该 Value 的节点，判断是否为 父节点，如果为父节点，那么需要移除其包含的所有子节点。否则，我们直接移除该 li 标签即可：

//handle the delete button
$("#btnDelete").click(function (e) {
  var valueToSearch = $("#txtUser").val();
  //call the custome Delete method
  DeleteNodeByValue(valueToSearch);
});

function DeleteNodeByValue(val) {
  var li_treeNodes = $(".wijmo-wijtree-list").find('li');

  //traverse through all the li tags
  $.each(li_treeNodes, function (index, node) {
  if ($(node).val() == val) {
    //get the parent of the specific node to delete
    var parent = $(node).wijtreenode('getOwner');
    //retrieve its index
    var nodeIndex = $(node).index();
    //check if its a child node
    if (parent != null)
      parent.element.wijtreenode("remove", nodeIndex);
    else
      $("#tree").wijtree("remove", nodeIndex);
     }
  });
}

演示页面：点击

演示截图：