(JavaScript)实现在客户端动态改变Treeview节点的选中状态

Asp.net 2.0 中的 Treeview 非常好用，而且轻便。但在使用过程中，往往会发现一些不够人性化的地方。

　　例如您要设计一棵树，里面放置了一些收藏的网址。在这棵树中，节点的 SelectAction 只有 Expand 和 NavigateUrl 状态，也就是说没有回调节点。这个时候您会发现一个严重的问题：点击节点后，节点不会显示为选中状态（背景颜色没改变），哪怕你已经设置了 SelectedNodeStyle 。

　　SelectedNodeStyle 必须在回调以后才会生效，也就是说，页面要刷新。这是难以忍受的。如图：



　　JavaScript 可以帮助我们改变这个尴尬的局面。一个简单的思路是，Node.Text 不是单纯的 Text，而是修改为一个带 ID 的 Span 。我们增加以下方法：

/**//// <summary>
/// 把节点设置为客户端选中状态
/// </summary>
private void SetNodeText(TreeNode node)
{
string id = "spnode_" + node.Value;
node.Text = "<span style='cursor:hand' id='" + id + "' οnclick=\"SetNode('" + id + "')\">" + node.Text + "</span>";
}

　　我们可以看到，点击节点，则调用了客户端的一个 SetNode 脚本：

<script>
    var lastnode = "";
    function SetNode(node)
    {
        document.getElementById(node).style.backgroundColor='#DBDBDB';
        if(lastnode!="" && lastnode!=node)
        {
            document.getElementById(lastnode).style.backgroundColor='#FFFFFF';
        }
        lastnode=node;
    }
</script>

　　在这个脚本中，我们采用一个全局变量 lastnode ，来保存上一次点击的节点 ID。

　　OK，现在为每个节点都调用 SetNodeText 方法，效果就出来了：



源代码：/Files/lemony/TreeViewEx.rar

注：

1，每个 Node 的 Value 都应该不同，这样在客户端产生的 Span ID 才会不重复。
2，JavaScript 可以辅助 TreeView 实现更好的客户端效果，只要你想得到。