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 實現更好的客戶端效果，只要你想得到。

轉載于:https://www.cnblogs.com/lemony/archive/2007/05/18/751053.html

總結

以上是生活随笔為你收集整理的(JavaScript)实现在客户端动态改变Treeview节点的选中状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。