iT邦幫忙

DAY 7
3

ASP.NET技巧系列 第 9

TreeView使用拖拉放的方式更改樹的結構 Part2

剛好在MSDN論壇中看到有人問了這麼個問題,還蠻有趣的,因此小喵就動手嘗試寫看看。這裡面用到了【TreeView結合資料庫】與【client端呼叫Server端事件的技巧】,另外在【TreeNode】沒有Attributes來設定Client端事件時,加入Client端事件的技巧。
承接上篇
再準備好遞迴建立節點的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 onmousedown='NodeDown(" & tmpNodeId & ")' onmouseup='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

上一篇
TreeView使用拖拉放的方式更改樹的結構 Part1
下一篇
TreeView使用拖拉放的方式更改樹的結構 Part3
系列文
ASP.NET技巧17

1 則留言

0
pantc328
iT邦研究生 1 級 ‧ 2009-10-11 10:57:44

這一篇我大概喵一下.基本上是還不錯.
我不知現在網頁進步到哪裡.我已經好幾年沒玩網頁了.
而用TreeView,就是要在Client 寫VB Script.Java Script或Ajax..不然用傳統的做法.
你只要去移動節點或畫面某部分重算.他就會全部PostBack回Server.整個畫面會閃一下.
現在外面應該很多資源可以找.
我在用ASP.NET 2.0 剛出來時.光研究Client Script 就花了一個多星期.

我要留言

立即登入留言