DevExpress.XtraTreeList

1. DevExpress.XtraTreeList控件
将其简称为tree，tree其实就是一个树表控件，他像树一样包含具有父子关系的若干节点，同时每个节点又是一个带有多个字段的记录。其用法非常简单方便，只需要为其配置带有父子关系的数据源，其就可以按照树的形式进行显示。
1.1 DevExpress.XtraTreeList配置数据源
数据源一般是一个二维表，可以是数据库中的表，该表中要包含表示父子关系的两个字段，即主键和父亲的主键。下面的代码是手动创建的数据源DataTable。

C# code?

DataTable dtAllPath = new DataTable("dtAllPath");

dtAllPath.Columns.Add("nodeID", typeof(int));

dtAllPath.Columns.Add("parNodeID", typeof(int));

dtAllPath.Columns.Add("stateName", typeof(string));

dtAllPath.Columns.Add("stateCode", typeof(string));

dtAllPath.Columns.Add("condition", typeof(string));

dtAllPath.Rows.Add(new object[] { 1, 0, "1", "1", "" });

dtAllPath.Rows.Add(new object[] { 2, 0, "2", "2", "" });

dtAllPath.Rows.Add(new object[] { 3, 1, "1.1", "1.1", "" });

dtAllPath.Rows.Add(new object[] { 4, 2, "2.1", "2.1", "" });

treeList1.DataSource = dtAllPath;

上面的代码中，nodeID是每行记录的主键，parNodeID是每行记录的父亲记录的主键，0表示树的根结点。最后一行代码是将生成的数据源交给
tree显示。当然为了完成树的显示工作，还需要配置tree的KeyFieldName属性为nodeID，ParentFieldName属性为
parNodeID（选中tree，在vs的属性窗口设置），还需要为tree添加列并配置该列与数据源中的字段对应关系，右键tree控件选择
run designer弹出下图，FieldName用来配置对应关系，tree中添加了两列，第一列和stateCode对应，designer可以
配置tree的各种属性，列标题，cell中的字体颜色等等，不再一一赘述。

1.2 DevExpress.XtraTreeList添加checkbox
   在tree的结点中添加checkbox是一项非常实用常见的功能，设置起来非常简单，选中tree，在VS的属性窗口中，找到OptionsView\ShowCheckBoxes，将其设置为true，即可。
1.3 DevExpress.XtraTreeList列表中添加ComboBox
  在tree控件中直接对信息进行编辑，有时可能需要用到ComboBox控件，具体添加方法，右键/run designer/选择列
/ColumnEdit/New，为该列创建一个内嵌的ComboBox控件，即repositoryItemComboBox，具体如下图所示。

1.4 repositoryItemComboBox下拉表不能显示
  通过repositoryItemComboBox的click事件，向其动态add下拉列表中的items后，点击
repositoryItemComboBox的下拉按钮，下拉列表闪一下就消失了（不是在click事件中添加items的情况，不会出现此问题）。解
决方案，在repositoryItemComboBox的ButtonClick事件中，将事件源sender转换为ComboBoxEdit，再利用
add函数添加item，最后手动显示下拉列表，代码如下：
ComboBoxEdit combo = sender as ComboBoxEdit;            combo.Properties.Items.Add(…);
combo.ShowPopup();

1.5 DevExpress.XtraTreeList设置焦点函数setFocusedNode()无效
   当使用TreeListNode addedNode = treeList1.AppendNode(参数略)，向tree中添加一个节点后，一
般想立刻使这个新添加的节点获得焦点，但此时如果直接使用treeList1.SetFocusedNode(addedNode)则无效，可能是因为
addedNode中不包含tree为其分配的nodeID(猜测)，解决方案是
treeList1.SetFocusedNode(treeList1.FindNodeByKeyID(stateID));即利用findnode
之类的函数去查询tree，找到新添加的结点，在将该节点作为SetFocusedNode的参数，则可以完成焦点的设置。
1.6 DevExpress.XtraTreeList查找结点函数FindNodeByKeyID()无效
  tree的find这类函数，在进行查找时，需要注意参数的类型，例如，这个函数FindNodeByKeyID（）是根据数据源里的主键进行结点查
找，即你需要给定tree对应数据源中的记录的key，如果数据源中的key是整型，而我们利用一个字符串类型作为参数的
话， FindNodeByKeyID（”100”）将不能找到节点，正确的写法应该是FindNodeByKeyID（100）。
1.7 DevExpress.XtraTreeList部分结点添加checkbox或者图片
   有些时候，不想在所有节点前都添加checkbox或者想在结点前添加图片，此时需要手动添加事件CustomDrawNodeCheckBox的
处理函数，在函数中为某些结点定制checkbox，或者图片，本处只着重说明定制checkbox，关于结点图片的代码可以参考网址
https://www.devexpress.com/Support/Center/Question/Details/Q142494。上码，上
图，如下：

C# code?

private void treeList2_CustomDrawNodeCheckBox(object sender, DevExpress.XtraTreeList.CustomDrawNodeCheckBoxEventArgs e)

{

String variID = e.Node.GetValue("variID").ToString();//e.Node为tree的结点

//满足该条件的结点，为其设置checkbox，其他结点没有checkbox

if (variID == "")

{

DevExpress.XtraTreeList.ViewInfo.IndentInfo ii = treeList2.ViewInfo.RowsInfo[e.Node].IndentInfo;

int x2 = e.Bounds.Left + ii.LevelWidth / 2;

int y2 = e.Bounds.Top + e.Bounds.Height / 2;

int h2 = e.Bounds.Height / 2 + 1;

Rectangle r1 = new Rectangle(e.Bounds.Left, y2, e.Bounds.Width, 1);

Rectangle r2 = new Rectangle(x2, y2, 1, h2);

e.Graphics.FillRectangle(treeList2.ViewInfo.RC.TreeLineBrush, r1);

if (e.Node.Expanded)

{

e.Graphics.FillRectangle(treeList2.ViewInfo.RC.TreeLineBrush, r2);

}

e.Handled = true;

}

在最近的工作中，使用到了DevExpress中的XtraTreeList用法，正好借此机会研究一下此控件的应用，现将其应用技巧与大家分享一下。

1、使用XtraTreeList绑定数据（数据格式可以为ArrayList形式）

我们实例说明要实现下面样式的窗体：

首先，在Run Designer里面添加两个列（columns），设置两列的属性，其中第一列“名称”为string格式，FieldName为Name；第二列“选择”将ColumnEdit属性设置为CheckEdit1，FieldName为IsChecked，设置完毕。

其次可以编写一个类，用来绑定TreeList，针对此TreeList窗体，其类代码设置如下：

public class TestTreeList

{

public TestTreeList()

{

}

//名称字段变量

private string m_sName = string.Empty;

//选择字段变量

private bool m_bIsChecked = false;

//子Node节点ID变量

private int m_iID = -1;

//父Node节点ID变量

private int m_iParentID = -1;

public int ID

{

get

{

return m_iID;

}

set

{

m_iID = value;

}

public int ParentID

{

get

{

return m_iParentID;

}

set

{

m_iParentID = value;

}

public string Name

{

get

{

return m_sName;

}

set

{

m_sName = value;

}

public bool IsChecked

{

get

{

return m_bIsChecked;

}

set

{

m_bIsChecked = value;

}

类构造完成，在FormLoad里面借助此类对TreeList进行绑定：

private void Form1_Load(object sender, EventArgs e)

{

ArrayList pList = new ArrayList();

TestTreeList p = new TestTreeList();

p.Name = "测试1";

p.IsChecked = true;

p.ID = 1;

pList.Add(p);

TestTreeList q = new TestTreeList();

q.Name = "测试2";

q.IsChecked = false;

q.ParentID = 1;

q.ID = 2;

pList.Add(q);

this.treeList1.DataSource = pList;

this.treeList1.RefreshDataSource();

}

这样就可以构造出一个简单的TreeList应用方法，程序运行结果可得第一幅图所示。

2、DevTreeList改变样式：

如果将TreeList控件改变成如下样式（同第一幅图不一样，将Check控件显示在节点最前面）。

可以直接修改其控件的ShowCheckBoxes属性即可（其它样式类似如下）。

3、DevTreeList非绑定形式实现：动态加载，构建：

运行样式如下：

实现动态加载的几个函数实现如下：

/// <summary>

/// 动态创建TreeList的Column，一列为图层名，一列为是否统计列Check控件

/// </summary>

private void creatTreeListControl()

{

DevExpress.XtraTreeList.Columns.TreeListColumn treeListColumnLayerName= new DevExpress.XtraTreeList.Columns.TreeListColumn();

treeListColumnLayerName.Caption = "名称";

treeListColumnLayerName.FieldName = "LayerName";

treeListColumnLayerName.MinWidth = 38;

treeListColumnLayerName.Name = "treeListColumnLayerName";

treeListColumnLayerName.Visible = true;

treeListColumnLayerName.VisibleIndex = 0;

treeListColumnLayerName.Width = 111;

DevExpress.XtraTreeList.Columns.TreeListColumn treeListColumnStatisticValue=new DevExpress.XtraTreeList.Columns.TreeListColumn();

treeListColumnStatisticValue.Caption = "统计值";

treeListColumnStatisticValue.ColumnEdit = this.repositoryItemCheckEdit1;

treeListColumnStatisticValue.FieldName = "StatisticValue";

treeListColumnStatisticValue.Name = "treeListColumnStatisticValue";

treeListColumnStatisticValue.Visible = true;

treeListColumnStatisticValue.VisibleIndex = 1;

this.treeListLayerControl.Columns.AddRange(new DevExpress.XtraTreeList.Columns.TreeListColumn[] {

treeListColumnLayerName,

treeListColumnStatisticValue});

this.treeListLayerControl.Nodes.Clear();

this.treeListLayerControl.Refresh();

}

/// <summary>

/// 动态创建TreeList Layer Node节点

/// </summary>

/// <param name="layerName"></param>

/// <param name="check"></param>

private void creatMainLayerNode(string layerName,bool check)

{

this.treeListLayerControl.BeginUnboundLoad();

this.treeListLayerControl.AppendNode(new object[] { layerName,check}, -1);

this.treeListLayerControl.EndUnboundLoad();

}

/// <summary>

/// 动态创建TreeList 字段属性值 Node节点

/// </summary>

/// <param name="ValueName"></param>

/// <param name="check"></param>

/// <param name="ID"></param>

private void CreatChildNode(string ValueName, bool check,int ID)

{

this.treeListLayerControl.BeginUnboundLoad();

this.treeListLayerControl.AppendNode(new object[] { ValueName, check }, ID);

this.treeListLayerControl.EndUnboundLoad();

}

/// <summary>

/// 获得图层名节点的Index值

/// </summary>

/// <param name="ParentNodeName"></param>

/// <returns></returns>

private int getParentID(string ParentNodeName)

{

int i = -1;

for (i = 0; i < this.treeListLayerControl.Nodes.Count;i++ )

{

if (this.treeListLayerControl.Nodes[i][0].ToString() == ParentNodeName)

{

break;

}

return i;

}

/// <summary>

/// 当点击Node事件发生改变（点击主节点时，其子节点跟着主节点变化）

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void treeListLayerControl_CellValueChanging(object sender, DevExpress.XtraTreeList.CellValueChangedEventArgs e)

{

if (e.Column.Name.Equals("treeListColumnStatisticValue") && e.Node.HasChildren)

{

object objCol = this.treeListLayerControl.Columns[1];

for (int i = 0; i < e.Node.Nodes.Count; i++)

{

e.Node.Nodes[i].SetValue(objCol, e.Value);

}

e.Node.SetValue(objCol, e.Value);

}

创建子节点方法：

int indexLayerTree = this.getParentID(playerInfo.LayerName);

if (indexLayerTree == -1)

return;

CreatChildNode(sValue, false, this.treeListLayerControl.Nodes[indexLayerTree].Id);

其创建主节点和创建子节点方法类似，比创建子节点简单的多。

4、总结

以上为个人研究DevExpress TreeList使用的大致方法，尽管文笔简单潦草，但是针对TreeList的基本使用足矣。

另外，DevExpress控件可以使系统界面做的十分漂亮，我的截图界面显得丑陋，只因为是实验程序，并不是真正应用，还请大家不要误解。

巴特西

DevExpress.XtraTreeList

最新文章

热门文章