2009-10-29 5 views
0

.NET 웹 페이지에 두 개의 TreeView 구성 요소가 있습니다. 한 트리에서 다른 트리로 노드를 드래그 앤 드롭하려고하지만 그 반대는 아닙니다. 또한 특정 수준 (가장 낮은 수준)에서 항목을 끌어다 놓고 특정 수준 (두 번째로 낮은 수준)에 놓기를 원합니다. 끌어서 놓기와 유사한 사용자 지정을 수행하기 위해 Flex에 사용자 지정 코드를 작성했지만 .NET을 처음 사용하는 초보자이며 실제로 여기에 실마리가 없습니다. 누군가 제게 조언 해주세요. 이것은 프로토 타입이므로 기본적인 기능 만 필요하지만 결국이 이동 작업을 위해 데이터를 업데이트하기 위해 데이터베이스에 대한 실시간 호출을 수행하기 위해 이러한 드롭이 필요할 것입니다.두 ComponentOne TreeView 구성 요소간에 드래그 앤 드롭을 사용자 정의 할 수 있습니까?

답변

1

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> 
관련 문제