如何自定義兩個ComponentOne TreeView組件之間的拖放操作？

我在.NET網頁中有兩個TreeView組件。我想將節點從一棵樹拖放到另一棵樹上，但不是相反。我還想拖放某個級別（最低級別）的項目，並將它們放在某個級別（次低級別）。我已經在Flex中編寫了自定義代碼來進行類似的拖放操作，但我是一個.NET新手，並且在這裏沒有任何線索。有人可以給我一些建議。這是一個原型，所以我只需要基本的功能，但最終我需要這些drop來執行對數據庫的實時調用，以更新這些移動操作的數據。如何自定義兩個ComponentOne TreeView組件之間的拖放操作？

來源

2009-10-29 Eric Belair

您可以使用OnClientNodeDropped事件處理程序在JavaScript中輕鬆完成此操作。如果拖動事件不在所需的級別，您也可以使用OnClientNodeDragStarted處理程序取消拖動事件。我在這裏發佈了一個可下載的drag and drop treeview sample。以下是該項目的示例代碼。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register TagPrefix="cc1" Namespace="C1.Web.UI.Controls.C1TreeView" Assembly="C1.Web.UI.Controls.3" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Treeview Test</title> 
<script type="text/javascript" id="ComponentOneClientScript2"> 
    function adminTV_OnClientNodeDropped(sender, eventArgs) { 
     var dropTarget = eventArgs.get_desObj(); 
     //if drop to the root level.the droptarget is treeview 
     if (dropTarget == sender) { 
      eventArgs.set_canceled(true); 
      return; 
     } 
     var node = eventArgs.get_node(); 
     //the other treeview's node can't drop to the admin's. 
     if (node.get_treeView() != dropTarget.get_treeView()) { 
      eventArgs.set_canceled(true); 
      return; 
     } 
     //prevent drop the admin's node to the other level. 
     if (dropTarget.get_level() != 0) { 
      eventArgs.set_canceled(true); 
      return; 
     } 
    }; 
    function adminTV_OnClientNodeDragStarted(sender, eventArgs) { 
     //can't drag root node. 
     if (eventArgs.get_node().get_level() == 0) { 
      eventArgs.set_canceled(true); 
     } 
    }; 

    function userTV_OnClientNodeDropped(sender, eventArgs) { 
     var dropTarget = eventArgs.get_desObj(); 
     //if drop to the root level.the droptarget is treeview 
     if (dropTarget == sender) { 
      eventArgs.set_canceled(true); 
      return; 
     } 
     //prevent drop the node to the other level. 
     if (dropTarget.get_level() != 0) { 
      eventArgs.set_canceled(true); 
      return; 
     } 
    }; 
    function userTV_OnClientNodeDragStarted(sender, eventArgs) { 
     //can't drag root node. 
     if (eventArgs.get_node().get_level() == 0) { 
      eventArgs.set_canceled(true); 
     } 
    }; 
</script>  
</head> 
<body style="font-weight: 700"> 
<form id="form1" runat="server"> 
<div> 


    <asp:ScriptManager runat="server"></asp:ScriptManager> 


    <cc1:C1TreeView runat="server" ID="adminTV" AllowDragDrop="true" 
    VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles" 
     OnClientNodeDropped="adminTV_OnClientNodeDropped" 
     onclientnodedragstarted="adminTV_OnClientNodeDragStarted" > 
     <Nodes> 
      <cc1:C1TreeViewNode runat="server" Expanded="true" Selected="false" Text="Administrators"> 
       <Nodes> 
        <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin1"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin2"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin3"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin4"> 
        </cc1:C1TreeViewNode> 
       </Nodes> 
      </cc1:C1TreeViewNode> 
     </Nodes> 
    </cc1:C1TreeView> 

    <cc1:C1TreeView runat="server" ID="userTV" AllowDragDrop="true" 
    VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles" 
     OnClientNodeDropped="userTV_OnClientNodeDropped" 
     onclientnodedragstarted="userTV_OnClientNodeDragStarted" > 
     <Nodes> 
      <cc1:C1TreeViewNode runat="server" Expanded="True" Selected="False" Text="Users"> 
       <Nodes> 
        <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User1"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User2"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User3"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User4"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User5"> 
        </cc1:C1TreeViewNode> 
        <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User6"> 
        </cc1:C1TreeViewNode> 
       </Nodes> 
      </cc1:C1TreeViewNode> 
     </Nodes> 
    </cc1:C1TreeView> 

</div> 
</form> 
</body> 
</html>

來源

2010-03-25 14:43:15 Banzor

如何自定義兩個ComponentOne TreeView組件之間的拖放操作？

回答

相關問題