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

DAY 7

ASP.NET技巧系列第 8 篇

網頁設計程式設計 asp.net 資料庫開發鐵人賽

2009-10-11 10:38:10

7440 瀏覽

剛好在MSDN論壇中看到有人問了這麼個問題，還蠻有趣的，因此小喵就動手嘗試寫看看。這裡面用到了【TreeView結合資料庫】與【client端呼叫Server端事件的技巧】，另外在【TreeNode】沒有Attributes來設定Client端事件時，加入Client端事件的技巧。
緣起
剛好在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>

<body onselect="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>
        

    </div>
    </form>

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