緣起
剛好在MSDN論壇中看到有人問了這麼個問題，還蠻有趣的，因此小喵就動手嘗試寫看看。這裡面用到了【TreeView結合資料庫】與【client端呼叫Server端事件的技巧】，另外在【TreeNode】沒有Attributes來設定Client端事件時，加入Client端事件的技巧。
背景知識
1.TreeView如何結合資料庫，這部分詳細的解說請參考這一篇
ASP.NET 2.0 使用資料表動態產生TreeView的樹狀結構
2.Client端Script呼叫Server端事件的技巧
如何透過JavaScript來觸發LinkButton的PostBack，呼叫後端的程式
畫面
首先當然在畫面中放個TreeView，另外也放了兩個TextBox用來紀錄要拖拉的NodeId與新的ParentId，另外還需要一個LinkButton，讓Client端的Script可以借用他的Server端事件，透過此事件來維護資料庫。使用TextBox是為了方便除錯、觀察，正式的時候，可以用Hidden物件來取代
我們來看一下畫面的內容
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body οnselect="document.selection.empty()">
<form id="form1" runat="server">
<div>
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer"
NodeIndent="15">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px" />
</asp:TreeView>
<asp:TextBox ID="txtNodeId" runat="server"></asp:TextBox>
<asp:TextBox ID="txtParentId" runat="server"></asp:TextBox>
<asp:LinkButton ID="lbChg" runat="server">變更</asp:LinkButton>
<br />
</div>
</form>
</body>
</html>
Server端程式
接著要寫Server端程式，首先當然要先準備資料庫存取的NameSpace
Imports System.Data
Imports System.Data.SqlClient接著，先宣告一個全域變數用來紀錄Tree的DataTable
Dim Dt As DataTable然後寫一下TreeView的初始化設定Init
Sub InitTree(ByVal myTreeView As TreeView)
'********初始化Tree********
'定義TreeView物件並實體化
Dim Tree1 As TreeView = myTreeView
'定義一個TreeNode並實體化
Dim tmpNote As New TreeNode
'設定【根目錄】相關屬性內容
tmpNote.Text = "首頁"
tmpNote.Value = "0"
tmpNote.NavigateUrl = ""
tmpNote.Target = "_Top"
'Tree建立該Node
Tree1.Nodes.Add(tmpNote)
End Sub接著準備讀取TreeView資料的Sub
Function GetDataTable() As DataTable
'取得DataTable
'宣告相關變數
Dim ConnStr As String
Dim Da As SqlDataAdapter
Dim Dt As New DataTable
Dim SqlTxt As String
Try
'設定連接字串，請修改符合您的資料來源的ConnectionString
ConnStr = ConfigurationManager.ConnectionStrings("MyTestConnStr").ConnectionString
'建立Connection
Using Conn = New SqlConnection(ConnStr)
'設定資料來源T-SQL
SqlTxt = "SELECT * FROM tTree" '請修改您的資料表名稱
'實體化DataAdapter並且取得資料
Da = New SqlDataAdapter(SqlTxt, Conn)
'資料填入DataSet
Da.Fill(Dt)
End Using
Catch ex As Exception
'Me.lblMessage.Text = ex.Message
End Try
Return Dt
End Function再準備好遞迴建立節點的Function
Function AddNodes(ByRef tNode As TreeNode, ByVal PId As Integer) As String
'******** 遞迴增加樹結構節點 ********
Try
'定義DataRow承接DataTable篩選的結果
Dim rows() As DataRow
'定義篩選的條件
Dim filterExpr As String
filterExpr = "ParentId = " & PId
'資料篩選並把結果傳入Rows
rows = Dt.Select(filterExpr)
'如果篩選結果有資料
If rows.GetUpperBound(0) >= 0 Then
Dim row As DataRow
Dim tmpNodeId As Long
Dim tmpsText As String
Dim tmpsValue As String
Dim tmpsUrl As String
Dim tmpsTarget As String
Dim NewNode As TreeNode
Dim rc As String
'逐筆取出篩選後資料
For Each row In rows
'放入相關變數中
tmpNodeId = row(0)
tmpsText = row(2)
tmpsValue = row(3)
tmpsUrl = row(4)
tmpsTarget = row(5)
'實體化新節點
NewNode = New TreeNode
'設定節點各屬性
'加入Client端Click動作
'**由於TreeNode無法透過Attributes增加Client端事件，所以在這邊用個小技巧
'**在Text裡面將本來的文字用個Span包起來，將MouseDown,MouseUp事件寫在裡面
NewNode.Text = "<span οnmοusedοwn='NodeDown(" & tmpNodeId & ")' οnmοuseup='NodeUp(" & tmpNodeId & ")'>" & tmpsText & "</span>"
NewNode.Value = tmpNodeId
'指定選擇的動作
NewNode.SelectAction = TreeNodeSelectAction.None
'不給超連結與Target
'NewNode.NavigateUrl = tmpsUrl
'NewNode.Target = tmpsTarget
'將節點加入Tree中
tNode.ChildNodes.Add(NewNode)
'呼叫遞回取得子節點
rc = AddNodes(NewNode, tmpNodeId)
Next
End If
'傳回成功訊息
AddNodes = "Success"
Catch ex As Exception
AddNodes = "False"
End Try
End Function再來，運用上面的，撰寫建立樹的Sub
Sub BuildTree(ByVal myTreeView As TreeView)
'********建立樹狀結構********
'宣告TreeView
Dim Tree1 As TreeView = myTreeView
'取得根目錄節點
Dim RootNode As TreeNode
RootNode = Tree1.Nodes(0)
Dim rc As String
'呼叫建立子節點的函數
rc = AddNodes(RootNode, 0)
End Sub以上這些都好了，就可以在PageLoad的時候，讓樹建立起來
順便把要用的ClientScript準備好，在PageLoad事件中產生
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dt = GetDataTable()
InitTree(Me.TreeView1)
BuildTree(Me.TreeView1)
'撰寫Client端事件，節點的MouseDown,MouseUp
Dim Script As String = ""
Script += " <script type='text/javascript'>" + vbCrLf
Script += " window.document.select=false; " + vbCrLf
Script += " " + vbCrLf
Script += " " + vbCrLf
Script += " " + vbCrLf
Script += " function NodeDown(NodeId){ " + vbCrLf
Script += " $('#" & Me.txtNodeId.ClientID & "').val(NodeId); " + vbCrLf
Script += " } " + vbCrLf
Script += " function NodeUp(NodeId){ " + vbCrLf
Script += " $('#" & Me.txtParentId.ClientID & "').val(NodeId); " + vbCrLf
Script += " var nid=$('#" & Me.txtNodeId.ClientID & "').val(); " + vbCrLf
Script += " var pid=NodeId; " + vbCrLf
Script += " if(nid!=pid){ " + vbCrLf
Script += " if(window.confirm('您確定要將節點(' + nid + ')搬到節點(' + pid + ')底下嗎??')) " + vbCrLf
Script += " { " + vbCrLf
Script += " //alert('yes' + pid); " + vbCrLf
'借用LinkButton的PostBack來運作
Script += " __doPostBack('" & Me.lbChg.ClientID & "',''); " + vbCrLf
Script += " } " + vbCrLf
Script += " } " + vbCrLf
Script += " " + vbCrLf
Script += " } " + vbCrLf
Script += " </script> " + vbCrLf
Script += " "
Script += " "
Page.ClientScript.RegisterClientScriptBlock(Page.GetType, "myScript", Script)
End Sub到了這邊，Tree就能夠順利的長出來了
再來，開始撰寫變更ParentId的程式碼
維護後，因為架構已經變更，因此要把樹清掉，再重新用新的架構長一次
Private Sub MoveNode(ByVal NodeId As Integer, ByVal ParentId As Integer)
'自己不能是自己底下，不能搬根目錄
If NodeId <> ParentId And NodeId <> 1 Then
Using Conn As New SqlConnection(ConfigurationManager.ConnectionStrings("MyTestConnStr").ConnectionString)
Dim SqlTxt As String = ""
'設定改ParentId的SQL語法
SqlTxt += " UPDATE tTree "
SqlTxt += " SET ParentId = @ParentId "
SqlTxt += " WHERE NodeId = @NodeId "
SqlTxt += " "
Using Cmmd As New SqlCommand(SqlTxt, Conn)
Cmmd.Parameters.AddWithValue("@ParentId", ParentId)
Cmmd.Parameters.AddWithValue("@NodeId", NodeId)
Conn.Open()
Cmmd.ExecuteNonQuery()
'更改後，清除TreeView節點，並重新建立樹結構
Me.TreeView1.Nodes.Clear()
Dt = GetDataTable()
InitTree(Me.TreeView1)
BuildTree(Me.TreeView1)
'全部展開
Me.TreeView1.ExpandAll()
End Using
End Using
End If
End Sub接著就是呼叫Server端的事件來呼叫MoveNode
Protected Sub lbChg_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lbChg.Click
Me.lblMsg.Text = Me.txtNodeId.Text & "搬到" & Me.txtParentId.Text & "底下"
If Me.txtNodeId.Text <> "" And Me.txtParentId.Text <> "" Then
'如果節點代號、父節點代號有，才運作
Dim NodeId As Integer = CType(Me.txtNodeId.Text, Integer)
Dim ParentId As Integer = CType(Me.txtParentId.Text, Integer)
'呼叫般移節點
MoveNode(NodeId, ParentId)
Else
Me.lblMsg.Text = "必須要有NodeId與ParentId"
End If
End Sub執行結果
到這邊已經完成了我們的範例。
執行結果如以下：
^_^
2009/8/17補充
話說，要拖拉，還是把拖拉的節點名稱顯示在滑鼠游標旁邊比較有Fu…所以小喵再次修改了一下，看一下運作後的效果先!!
改的地方並不多，首先在畫面上多幾個物件來紀錄，分別是
txtNodeText：紀錄節點的內容
Hidden1：紀錄拖拉的狀態
spanNode：用以顯示在滑鼠旁邊的東西
- <asp:TextBox ID="txtNodeText" runat="server"></asp:TextBox>
- <span id="spanNode" style=""></span>
- <input id="Hidden1" type="text" value="0" />
<asp:TextBox ID="txtNodeText" runat="server"></asp:TextBox> <span id="spanNode" style=""></span> <input id="Hidden1" type="text" value="0" />
接著，修改一下檢點【MouseDown】與【MouseUp】事件中，多紀錄這些內容，寫在CodeFile的PageLoad裡面
- '撰寫Client端事件，節點的MouseDown,MouseUp
- Dim Script As String = ""
- Script += " <script type='text/javascript'>" + vbCrLf
- Script += " window.document.select=false; " + vbCrLf
- Script += " " + vbCrLf
- Script += " function NodeDown(NodeId,NodeText){ " + vbCrLf
- Script += " $('#" & Me.txtNodeId.ClientID & "').val(NodeId); " + vbCrLf
- Script += " $('#Hidden1').val(1); " + vbCrLf
- Script += " $('#" & Me.txtNodeText.ClientID & "').val(NodeText); " + vbCrLf
- Script += " $('#spanNode').html(NodeText); " + vbCrLf
- Script += " } " + vbCrLf
- Script += " function NodeUp(NodeId){ " + vbCrLf
- Script += " $('#Hidden1').val(0); " + vbCrLf
- Script += " alert('xx'); " + vbCrLf
- Script += " $('#" & Me.txtParentId.ClientID & "').val(NodeId); " + vbCrLf
- Script += " var nid=$('#" & Me.txtNodeId.ClientID & "').val(); " + vbCrLf
- Script += " var pid=NodeId; " + vbCrLf
- Script += " if(nid!=pid){ " + vbCrLf
- Script += " if(window.confirm('您確定要將節點(' + nid + ')搬到節點(' + pid + ')底下嗎??')) " + vbCrLf
- Script += " { " + vbCrLf
- Script += " //alert('yes' + pid); " + vbCrLf
- '借用LinkButton的PostBack來運作
- Script += " __doPostBack('" & Me.lbChg.ClientID & "',''); " + vbCrLf
- Script += " } " + vbCrLf
- Script += " } " + vbCrLf
- Script += " " + vbCrLf
- Script += " } " + vbCrLf
- Script += " </script> " + vbCrLf
'撰寫Client端事件，節點的MouseDown,MouseUp
Dim Script As String = ""
Script += " <script type='text/javascript'>" + vbCrLf
Script += " window.document.select=false; " + vbCrLf
Script += " " + vbCrLf
Script += " function NodeDown(NodeId,NodeText){ " + vbCrLf
Script += " $('#" & Me.txtNodeId.ClientID & "').val(NodeId); " + vbCrLf
Script += " $('#Hidden1').val(1); " + vbCrLf
Script += " $('#" & Me.txtNodeText.ClientID & "').val(NodeText); " + vbCrLf
Script += " $('#spanNode').html(NodeText); " + vbCrLf
Script += " } " + vbCrLf
Script += " function NodeUp(NodeId){ " + vbCrLf
Script += " $('#Hidden1').val(0); " + vbCrLf
Script += " alert('xx'); " + vbCrLf
Script += " $('#" & Me.txtParentId.ClientID & "').val(NodeId); " + vbCrLf
Script += " var nid=$('#" & Me.txtNodeId.ClientID & "').val(); " + vbCrLf
Script += " var pid=NodeId; " + vbCrLf
Script += " if(nid!=pid){ " + vbCrLf
Script += " if(window.confirm('您確定要將節點(' + nid + ')搬到節點(' + pid + ')底下嗎??')) " + vbCrLf
Script += " { " + vbCrLf
Script += " //alert('yes' + pid); " + vbCrLf
'借用LinkButton的PostBack來運作
Script += " __doPostBack('" & Me.lbChg.ClientID & "',''); " + vbCrLf
Script += " } " + vbCrLf
Script += " } " + vbCrLf
Script += " " + vbCrLf
Script += " } " + vbCrLf
Script += " </script> " + vbCrLf另外就是，當進行拖拉的時候(MouseMove)，顯示節點文字並跟隨滑鼠游標，這部分寫在aspx中的<Script>裡面囉
- <script type="text/javascript">
- $(document).ready(function() {
- $(document).mousemove(function(e) {
- //檢查是否在拖拉狀態
- if ($('#Hidden1').val() == 1) {
- //拖拉中，設定顯示位置
- var sp = $('#spanNode');
- sp.css({position:'absolute',left:e.clientX, top:e.clientY});
- }
- else {
- $('#spanNode').html('');
- }
- });
- })
- </script>
<script type="text/javascript">
$(document).ready(function() {
$(document).mousemove(function(e) {
//檢查是否在拖拉狀態
if ($('#Hidden1').val() == 1) {
//拖拉中，設定顯示位置
var sp = $('#spanNode');
sp.css({position:'absolute',left:e.clientX, top:e.clientY});
}
else {
$('#spanNode').html('');
}
});
})
</script>
而拖拉的範圍是整個Document，所以寫在Document的mousemove事件中
詳細完整的程式碼請點選下面下載
1481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
