zoukankan      html  css  js  c++  java
  • DevExpress学习笔记(五)-以拖拽的方式构建树(TreeList)

    DevExpress学习笔记

    以拖拽的方式构建树(TreeList)

    本人最近在做某个项目中需要用到动态设置TreeList节点的技术,在这个过程中对于TreeList的各项功能有了初步的尝试,准备分几篇内容将其记录下来。这一篇主要记录TreeList的拖拽功能。

    一 ImageListBoxControl 至 TreeList

    在Visual Studio新建一个Form,并且将ImageListBoxControl和TreeList两个控件分别拖到这个Form上,设置相关属性.涉及到拖拽必然会有源控件和目标控件,需要设置目标控件的AllowDrop属性为True,在此处就需要设置TreeList的AllowDrop属性为True。

    下面开始ImageListBoxControl的初始化操作。我们模仿逻辑运算符,添加3个“与、或、非”的逻辑图标到ImageListBoxControl,界面效果如下:

     

    我们需要做的工作就是将上面的三个节点拖拽至TreeList中,生成三个树节点。主要分为三个步骤来做。

    首先,需要为ImageListBoxControl新增三个事件相应函数,分别为MouseDown,MouseMove和GiveFeedback。这三个函数的含义为MouseDown和MouseMove表示鼠标的按键和拖动的事件,GiveFeedback表示在鼠标拖动时,控件给予系统请求的响应。实现代码如下:

    View Code
     1 private void imageListBoxControl1_MouseDown(object sender, MouseEventArgs e)
     2 
     3         {
     4 
     5             //获取当前鼠标选择的项目Index
     6 
     7             int index = imageListBoxControl1.IndexFromPoint(new Point(e.X, e.Y));
     8 
     9             if (index >= 0)
    10 
    11             {
    12 
    13 //根据index获取选择的Item
    14 
    15                 newItem = imageListBoxControl1.Items[index];
    16 
    17             }
    18 
    19         }
    20 
    21  
    22 
    23         private void imageListBoxControl1_MouseMove(object sender, MouseEventArgs e)
    24 
    25         {
    26 
    27             if (newItem == null || e.Button != MouseButtons.Left) return;
    28 
    29          //ImageListBoxControl拖拽响应事件,LogicDragObject为自定义的逻辑操作Item类。
    30 
    31             imageListBoxControl1.DoDragDrop(new LogicDragObject(newItem.ImageIndex,++groupNum), DragDropEffects.Copy);
    32 
    33         }
    34 
    35  
    36 
    37         private void imageListBoxControl1_GiveFeedback(object sender, GiveFeedbackEventArgs e)
    38 
    39         {
    40 
    41             e.UseDefaultCursors = false;
    42 
    43         }

       其次,新增TreeList控件的DragDrop、GiveFeedback和DragOver三个响应事件。

    DragDrop的事件部分代码如下:

    TreeListHitInfo hi = treeList1.CalcHitInfo(treeList1.PointToClient(new Point(e.X, e.Y)));
    
                LogicDragObject dobj = GetDragObject(e.Data);
    
                //拖放逻辑操作符
    
                    TreeListNode node = hi.Node;
    
                    if (hi.HitInfoType == HitInfoType.Empty || node != null)
    
                    {
    
                        node = treeList1.AppendNode(dobj.LogicDragData, node);
    
                        node.StateImageIndex = dobj.ImageIndex;
    
                        treeList1.MakeNodeVisible(node);
    
                    }
    
    

    拖拽的本质就是由CalcHitInfo获取当前放置的节点,由GetDragObject(e.Data)获取到需要放置的Data,通过AppendNode添加Node,最后MakeNodeVisible使Node可见。

    效果示意图如下:

     

    二 TreeList至LabelControl

    现在我想实现以拖拽的方式删除树节点的操作。首先,放置一个LabelControl,并且将其设置为回收站的图标。和上面一样,需要将LabelControl的AllowDrop属性设置为True。然后需要实现DragDrop、DragEnter和DragLeave三个响应事件。

    DragDrop的部分实现代码如下:

          

     //获取需要删除的树节点,e.Data为获取到的TreeList的拖拽节点
    
               TreeListNode node = GetDragNode(e.Data);
    
                if (node != null)
    
                {
    
                    treeList1.DeleteNode(node);
    
                }
    
                SetDefaultLabel(); 
    
     
    
  • 相关阅读:
    mobx的一个记录
    前端模块规范AMD/UMD/CommonJs
    CSS3字体大小单位的认识px/em/rem
    各浏览器之间的字号检测
    react整理一二(初入React世界)
    Node.js中实现套接字服务
    闲来无事,把node又拾起来看看
    判断类型
    html5 搜索框
    CSS 设置placeholder属性
  • 原文地址:https://www.cnblogs.com/liwei81730/p/2634546.html
Copyright © 2011-2022 走看看