[轉貼] 打造拖曳版的TreeView

2012031213:51

出處:http://www.dotblogs.com.tw/code6421/archive/2009/08/15/10079.aspx

/黃忠成

 
從兩段影片開始
 
 
 
 
TreeView可拖曳需克服的困難
 
 
想讓原生的TreeView控制項支援拖曳,首先得先滿足幾個要件。
 
1、必須擁有一個支援拖曳的JavaScript Library
2、必須能將mousedownmouseup事件掛到TreeNode上。
3、必須能在Drop時,進行Postback動作,讓後端得知Node的移動。
 
第一點對我來說並不難,因為之前撰寫 ASP.NET AJAX 一書時,就已經提供了 GridView 標頭移位的例子,其中的拖曳 Javascript Library 可以直接拿來修改。
 
第二點比較麻煩,因為 TreeView 有個特別的地方,每個 Node  Client ID 皆是隱藏的,所以無法像使用 GridView 般,在 RowCreated 處加上 mousedown  mouseup 事件。
 
第三點不困難,只要能解決前兩點,那麼在 Drop 時觸發 PostBack ,告知後端 Node 的移動,就只是短短一行 __doPostBack 程式碼而已,問題在, ASP.NET  PostBack 機制有著驗證機制,在 PostBack 時不能隨意指定參數,這點可透過 RegisterForEventValidation 函式,搭配 Hidden Field 解決。
 
 
 
 TreeView的序號產生規則
 
所以,總結前面三點的討論,對我而言,第二點是最棘手的!在觀察 TreeView 的運行邏輯,發現到 TreeNode 有一個內部用屬性,名為 SelectID,其內的值即是每個 Node  ClientID ,如果可以取到這個值,那麼要為 Node 掛上 mousedown  mouseup 事件就不困難了。
 
......中間一大段略 

 
後記
 
整個 TreeView 拖曳核心就在 .js  TreeViewDragExtender 中,如你所見,一旦你能夠掛上事件至 Node ,那麼 TreeView 就在你的掌握下了。
 
 
 
範例下載(C#)
 
 
範例下載(VB.NET)