Как я могу настроить перетаскивание между двумя компонентами ComponentOne TreeView? - PullRequest
Новая
       15

Как я могу настроить перетаскивание между двумя компонентами ComponentOne TreeView?

0 голосов
/ 30 октября 2009

У меня есть два компонента TreeView на веб-странице .NET. Я хочу перетаскивать узлы из одного дерева в другое, но не наоборот. Я также хочу перетаскивать элементы на определенном уровне (самый низкий уровень) и удалять их на определенном уровне (второй самый низкий уровень). Я написал собственный код во Flex, чтобы выполнить аналогичную настройку для перетаскивания, но я новичок в .NET, и действительно не имею здесь никакого понятия. Может кто-нибудь дать мне совет. Это прототип, поэтому мне нужны только базовые функциональные возможности, но в конечном итоге мне понадобятся эти отбрасывания для выполнения обращений к базе данных в реальном времени для обновления данных для этих операций перемещения.

1 Ответ

1 голос
/ 25 марта 2010

Вы можете сделать это довольно легко в JavaScript, используя обработчик событий OnClientNodeDropped. Вы также можете использовать обработчик OnClientNodeDragStarted для отмены событий перетаскивания, если они не находятся на нужном уровне. Я разместил загружаемый образец дерева перетаскивания здесь. Ниже приведен пример кода из проекта. 

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