(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 + "' onclick=\"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 實現更好的用戶端效果，只要你想得到。