在DevExpress程序中如何使用TreeList控件

发布时间:2021-08-27 13:39:17 作者:小新
来源:亿速云 阅读:245

这篇文章主要介绍了在DevExpress程序中如何使用TreeList控件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

1、 使用微软的TreeView控件的实现效果和思路

在很多情况下,我们也倾向于使用TreeView控件作为数据的展示,相对于TreeList控件,这种控件的处理,需要自己管理树节点的层次关系,不过使用也比较简单,呈现的效果两者都差别不大。

如在我开发框架中,在字典管理模块里面,就是采用这个控件进行数据的展示的,整体效果也还不错。

在DevExpress程序中如何使用TreeList控件

在树形列表里面,我们获取数据后,统一根据层级的关系构建树节点即可,如下代码所示。

/// <summary>
/// 初始化树信息
/// </summary>
private void InitTreeView()
{
  this.treeView1.Nodes.Clear();
  this.treeView1.BeginUpdate();
  List<DictTypeNodeInfo> typeNodeList = BLLFactory<DictType>.Instance.GetTree();
  foreach (DictTypeNodeInfo info in typeNodeList)
  {
    AddTree(null, info);
  }
  this.treeView1.EndUpdate();
  this.treeView1.ExpandAll();
}
/// <summary>
/// 根据节点数据,递归构建该层级以下的树节点
/// </summary>
/// <param name="pNode">父树节点</param>
/// <param name="info">字典类型数据</param>
private void AddTree(TreeNode pNode, DictTypeNodeInfo info)
{
  TreeNode node = null;
  if (info.PID == "-1")
  {
    node = new TreeNode(info.Name, 0, 0);
    node.Tag = info.ID;
    this.treeView1.Nodes.Add(node);
  }
  else
  {
    node = new TreeNode(info.Name, 1, 1);
    node.Tag = info.ID;
    pNode.Nodes.Add(node);
  }
  foreach (DictTypeNodeInfo subInfo in info.Children)
  {
    AddTree(node, subInfo);
  }
}

还有我们在鼠标选择某个节点的时候,触发AfterSelect事件,这样我们就可以处理鼠标节点的事件了

/// <summary>
/// 单击节点事件处理
/// </summary>
private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)
{
  if (e.Node.Tag != null)
  {
    this.lblDictType.Text = e.Node.Text;
    this.lblDictType.Tag = e.Node.Tag;
    BindData();
  }
}

以上就是使用TreeView控件来处理数据的展示,从上面代码可以看到,整体的内容,主要是通过递归的关系来构建TreeNode的处理,但是使用的代码也不算复杂,因此大多数可以采用这种方式来自定义树形节点的展示。

2、使用DevExpress的TreeList控件的效果和实现代码

而使用DevExpress的TeeList控件,可以通过KeyFieldName和ParentFieldName指定他们的层级关系,使用就更加简单化,提供的数据源会自动进行层次的关系处理,非常方便。

我们先来看看通过DevExpress的TreeList控件展示的字典类型和字典数据的界面效果。

在DevExpress程序中如何使用TreeList控件

这里面的效果是如何通过代码实现的呢?

首先我们使用代码获取字典类型数据并进行树列表控件的初始化操作,如下所示。

//添加显示列
this.tree.Columns.Add(new TreeListColumn{ FieldName= "Name", Caption= "字典类型名称", Width=160, VisibleIndex =0});
//设置树控件的层次关系及属性
tree.KeyFieldName = "ID";
tree.ParentFieldName = "PID";
this.tree.OptionsBehavior.Editable = false;
this.tree.OptionsView.EnableAppearanceOddRow = true;
this.tree.OptionsView.EnableAppearanceEvenRow = true;

上面的代码我们还可以通过扩展函数对树列表的处理进行封装,已达到简化代码的目的,如下是处理后的实现代码:

//控件扩展函数封装处理
this.tree.CreateColumn("Name", "字典类型名称", 160, true);
this.tree.InitTree("ID", "PID", "-1", false, false);

通过添加TreeListColumn对象给TreeList控件就可以实现字段列的显示了,同时指定数据源里面的KeyFieldName和ParentFieldName来设定层级关系即可,非常简单。

而绑定数据源,则可以通过一个函数进行处理,如下所示。

/// <summary>
/// 绑定树的数据源
/// </summary>
private void BindTree()
{
  this.tree.DataSource = BLLFactory<DictType>.Instance.GetAll();
  this.tree.ExpandAll();
}

从上面代码我们可以看到,我们返回的数据源,不需要在实体类对象层级具有上下级的关系,如通过TreeView实现的时候,我们使用了DictTypeNodeInfo 对象是具有上下层级关系的。

这里只需要使用普通的DictTypeInfo 对象集合即可,通过KeyFieldName和ParentFieldName来设定层级关系即可。

为了指定树形节点的图标,我们可以通过代码进行自定义图标的处理,如下代码所示,这样每个层级的图标都不一样,自动实现获取设置的处理。

//设置树的图标集合及逐级图标
this.tree.SelectImageList = this.imageCollection1;
this.tree.CustomDrawNodeImages += (object sender, CustomDrawNodeImagesEventArgs e)=>
{
  int maxCount = this.imageCollection1.Images.Count;
  var index = e.Node.Level < maxCount ? e.Node.Level : 0;
  e.SelectImageIndex = index;
};

实现树节点选中的事件处理,则需要实现FocusedNodeChanged事件即可。

//初始化树节点选择事件
  this.tree.FocusedNodeChanged += delegate(object sender, FocusedNodeChangedEventArgs e)
  {
    this.FocusedNodeChanged();
  };
}
private void FocusedNodeChanged()
{
  if (this.tree.FocusedNode != null)
  {
    var PID = string.Concat(this.tree.FocusedNode.GetValue("ID"));
    treeConditionSql = string.Format("DictType_ID = '{0}'", PID);
  }
  else
  {
    treeConditionSql = "";
  }
  BindData();
}

最后初始化树列表的代码如下所示。

private void InitTree()
{
  this.tree.Columns.Clear();
  //控件扩展函数封装处理
  this.tree.CreateColumn("Name", "字典类型名称", 160, true);
  this.tree.InitTree("ID", "PID", "-1", false, false);
  //设置树的图标集合及逐级图标
  this.tree.SelectImageList = this.imageCollection1;
  this.tree.CustomDrawNodeImages += (object sender, CustomDrawNodeImagesEventArgs e)=>
  {
    int maxCount = this.imageCollection1.Images.Count;
    var index = e.Node.Level < maxCount ? e.Node.Level : 0;
    e.SelectImageIndex = index;
  };
}

3、基于SearchControl控件对节点进行查询的操作

上面的处理就是树列表的一般性展示,如果需要在树节点上面增加一个查询过滤的操作,那么可以使用SearchControl控件进行过滤处理,只需要设置SearchControl控件的Client属性,以及实现树控件的FilterNode事件即可。

/// <summary>
/// 实现树节点的过滤查询
/// </summary>
private void InitSearchControl()
{
  this.searchControl1.Client = this.tree;
  this.tree.FilterNode += (object sender, DevExpress.XtraTreeList.FilterNodeEventArgs e) =>
  {
    if (tree.DataSource == null)
      return;
    string nodeText = e.Node.GetDisplayText("Name");//参数填写FieldName 
    if (string.IsNullOrWhiteSpace(nodeText))
      return;
    bool isExist = nodeText.IndexOf(searchControl1.Text, StringComparison.OrdinalIgnoreCase) >= 0;
    if (isExist)
    {
      var node = e.Node.ParentNode;
      while (node != null)
      {
        if (!node.Visible)
        {
          node.Visible = true;
          node = node.ParentNode;
        }
        else
          break;
      }
    }
    e.Node.Visible = isExist;
    e.Handled = true;
  };
}

实现效果如下所示, 对于符合记录的查询,那么会有高亮的颜色进行重点标注。

在DevExpress程序中如何使用TreeList控件

感谢你能够认真阅读完这篇文章,希望小编分享的“在DevExpress程序中如何使用TreeList控件”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 如何使用Devexpress的报表控件来实现数据报表
  2. Dev Treelist使用经验(1)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

devexpress treelist

上一篇:如何利用CSS3创建实用的加载动画效果

下一篇:ASP.NET MVC如何使用EPPlus导出数据到Excel中

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》