文/黃忠成
從兩段影片開始
讓TreeView可拖曳需克服的困難
想讓原生的TreeView控制項支援拖曳，首先得先滿足幾個要件。
1、必須擁有一個支援拖曳的JavaScript Library。
2、必須能將mousedown、mouseup事件掛到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)
沒有留言:
張貼留言