DevExpress.XtraTreeList

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

C# code?
1
2
3
4
5
6
7
8
9
10
11
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?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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控件可以使系统界面做的十分漂亮,我的截图界面显得丑陋,只因为是实验程序,并不是真正应用,还请大家不要误解。

posted on 2015-06-14 07:49  武胜-阿伟  阅读(11442)  评论(0编辑  收藏  举报