javascript - 如何在javascript中为 TreeView 节点着色

Question

我有一个 TreeView 和一个文本框，允许用户在 TreeView 中搜索节点。

我已经编写了判断 TreeView 中是否存在节点的 JS 函数。
我想要的是为用户搜索的节点着色。我该怎么做？？

Answer 1

使用 CSS 并更改 Javascript 中的类名。所以说你的节点是 div。当你找到节点时，在 Javascript 中，你会做类似的事情:

divFoundNode.className = "selected";

然后确保您的 CSS 有一个带有背景颜色集的选定类。这看起来像这样:

.selected {background-color:red;} /* whatever your selected color is here */

如果你不想使用 CSS，你可以像这样直接改变节点的颜色:

divFoundNode.style.backgroundColor = "red";

现在，您可能还需要关闭之前首先选择的任何其他节点的选择。为此，您有几个选择。您可以遍历所有节点并在设置所选节点之前删除颜色(如上所示)，或者您可以在 Javascript 中存储一个变量，其中包含最后一个选定的 div 并仅针对该节点。所以你会做这样的事情:

var divLastFoundNode; //global variable

function treeView_SelectNode(divFoundNode)
{
     divLastFoundNode.className = "";
     divFoundNode.className = "selected";
     divLastFoundNode = divFoundNode;
}

JQuery 将使这变得相当容易。您可以选择大量节点并一次对所有节点执行操作。例如:

$("div.node").removeClass("selected");
$(divFoundNode).addClass("selected");