iT邦幫忙

DAY 7
2

ASP.NET技巧系列 第 10

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

承接上篇
到了這邊,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

話說,要拖拉,還是把拖拉的節點名稱顯示在滑鼠游標旁邊比較有Fu…所以小喵再次修改了一下,看一下運作後的效果先!!
http://www.youtube.com/watch?v=ULPWaPo2zsc&feature=player\_embedded
改的地方並不多,首先在畫面上多幾個物件來紀錄,分別是
txtNodeText:紀錄節點的內容
Hidden1:紀錄拖拉的狀態
spanNode:用以顯示在滑鼠旁邊的東西

<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

另外就是,當進行拖拉的時候(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>

而拖拉的範圍是整個Document,所以寫在Document的mousemove事件中
詳細完整的程式碼請點選下面下載
http://demo.dotblogs.com.tw/topcat/sample/MoveTreeNode/tTreeView2.zip


上一篇
TreeView使用拖拉放的方式更改樹的結構 Part2
下一篇
ObjectDataSource簡介Part1:兼具ADO.NET的自由與DataSource的方便
系列文
ASP.NET技巧17

尚未有邦友留言

立即登入留言