實現 Asp.Net 2.0的TreeView客戶端個性化控制

ASP.NET 2.0 的 TreeView　控件功能雖說強大,但其客戶端控制很遜色,本文將講解 TreeView 的客戶端實現原理,並實現兩個個性化操作：

(1) 節點的全部打開和關閉;

TreeNode Expand(or Collapse) all

(2) 只打開一個節點(關閉其他兄弟節點)。

just one node expanded(when a client expand one node all other will collaps)

用記事本打開頁面源代碼，可以找到一下兩個腳本引用：Code

[copy to clipboard]CODE:

<script src="/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000" type="text/javascript">
</script>

<script src="/WebUI/WebResource.axd?d=JuTdJhq3NM8Jq_RhssAkEg2&t=633300220640000000" type="text/javascript">
</script>

將"/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000"拷到地址欄尾,下載腳本，並以 .js 命名，另一個同樣操作。分析第二個腳本文件，可以看到TreeView的很多客戶端函數，其中關鍵的一個 TreeView_ToggleNode 就是客戶端點擊時觸發的事件。

要想做個性化的操作，就得從 TreeView_ToggleNode 事件下手。我們無法更改.net封裝好的腳本，只有“重寫”。所謂的重寫就是在原來的函數之後添加一個同名函數(因為js對於同名函數只調用最後一個)。

TreeView_ToggleNode 的原函數：Code

[copy to clipboard]CODE:

function TreeView_ToggleNode(data, index, node, lineType, children) {
var img = node.childNodes[0];
var newExpandState;
try {
if (children.style.display == "none") {
children.style.display = "block";
newExpandState = "e";
if ((typeof(img) != "undefined") && (img != null)) {
if (lineType == "l") {
img.src = data.images[15];
}
else if (lineType == "t") {
img.src = data.images[12];
}
else if (lineType == "-") {
img.src = data.images[18];
}
else {
img.src = data.images[5];
}
img.alt = data.collapseToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));
}
}
else {
children.style.display = "none";
newExpandState = "c";
if ((typeof(img) != "undefined") && (img != null)) {
if (lineType == "l") {
img.src = data.images[14];
}
else if (lineType == "t") {
img.src = data.images[11];
}
else if (lineType == "-") {
img.src = data.images[17];
}
else {
img.src = data.images[4];
}
img.alt = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));
}
}
}
catch(e) {}
data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);
}