Comment personnaliser le glisser-déposer entre deux composants ComponentOne TreeView?

J'ai deux composants TreeView dans la page Web .NET. Je veux glisser-déposer des nœuds d'un arbre à l'autre, mais pas vice versa. Je veux aussi glisser-déposer des objets à un certain niveau (le niveau le plus bas), et les déposer à un certain niveau (le deuxième niveau le plus bas). J'ai écrit du code personnalisé dans Flex pour faire une personnalisation similaire pour le glisser-déposer, mais je suis un débutant avec .NET, et je n'ai vraiment aucune idée ici. Quelqu'un pourrait-il me donner un conseil s'il vous plaît? C'est un prototype, donc je n'ai besoin que de fonctionnalités de base, mais éventuellement j'aurai besoin de ces gouttes pour effectuer des appels en temps réel à la base de données pour mettre à jour les données pour ces opérations de déplacement.Comment personnaliser le glisser-déposer entre deux composants ComponentOne TreeView?

Source

2009-10-29 Eric Belair

Vous pouvez le faire assez facilement en JavaScript en utilisant le gestionnaire d'événements OnClientNodeDropped. Vous pouvez également utiliser le gestionnaire OnClientNodeDragStarted pour annuler les événements de glissement s'ils ne sont pas au niveau souhaité. J'ai posté un drag and drop treeview sample téléchargeable ici. Voici l'exemple de code du projet.

<%@ 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>

Source

2010-03-25 14:43:15 Banzor

Comment personnaliser le glisser-déposer entre deux composants ComponentOne TreeView?

Répondre

Questions connexes