DevExpress Winforms Controls 內(nèi)置140多個UI控件和庫，完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序。DevExpress WinForm v20.1全新發(fā)布，想要體驗？點擊下載>>

在很多情況下，我們需要通過樹列表進行數(shù)據(jù)的展示，如一些有層次關(guān)系的數(shù)據(jù)，通過有層級的展示，能夠使用戶更加直觀查看和管理相關(guān)的數(shù)據(jù)。在一般Winform開發(fā)的情況下，可以使用微軟的TreeView控件，也可以使用DevExpress的TreeList控件進行數(shù)據(jù)的展示，本篇隨筆主要介紹基于DevExpress的TreeList控件使用以及使用SearchControl對節(jié)點進行查詢的操作。

一、使用微軟的TreeView控件的實現(xiàn)效果和思路

在很多情況下，我們也傾向于使用TreeView控件作為數(shù)據(jù)的展示，相對于TreeList控件，這種控件的處理，需要自己管理樹節(jié)點的層次關(guān)系，不過使用也比較簡單，呈現(xiàn)的效果兩者都差別不大。

如在我開發(fā)框架中，在字典管理模塊里面，就是采用這個控件進行數(shù)據(jù)的展示的，整體效果也還不錯。

在樹形列表里面，我們獲取數(shù)據(jù)后，統(tǒng)一根據(jù)層級的關(guān)系構(gòu)建樹節(jié)點即可，如下代碼所示。

/// 

/// 初始化樹信息
/// 
private void InitTreeView()
{
this.treeView1.Nodes.Clear();
this.treeView1.BeginUpdate();
List typeNodeList = BLLFactory.Instance.GetTree();
foreach (DictTypeNodeInfo info in typeNodeList)
{
AddTree(null, info);
}
this.treeView1.EndUpdate();
this.treeView1.ExpandAll();
}

/// 

/// 根據(jù)節(jié)點數(shù)據(jù)，遞歸構(gòu)建該層級以下的樹節(jié)點
/// 
/// 父樹節(jié)點
/// 字典類型數(shù)據(jù)
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);
}
}

還有我們在鼠標選擇某個節(jié)點的時候，觸發(fā)AfterSelect事件，這樣我們就可以處理鼠標節(jié)點的事件。

/// 

/// 單擊節(jié)點事件處理
/// 
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控件來處理數(shù)據(jù)的展示，從上面代碼可以看到，整體的內(nèi)容，主要是通過遞歸的關(guān)系來構(gòu)建TreeNode的處理，但是使用的代碼也不算復(fù)雜，因此大多數(shù)可以采用這種方式來自定義樹形節(jié)點的展示。

二、使用DevExpress的TreeList控件的效果和實現(xiàn)代碼

而使用DevExpress的TeeList控件，可以通過KeyFieldName和ParentFieldName指定他們的層級關(guān)系，使用就更加簡單化，提供的數(shù)據(jù)源會自動進行層次的關(guān)系處理，非常方便。我們先來看看通過DevExpress的TreeList控件展示的字典類型和字典數(shù)據(jù)的界面效果。

這里面的效果是如何通過代碼實現(xiàn)的呢？首先我們使用代碼獲取字典類型數(shù)據(jù)并進行樹列表控件的初始化操作，如下所示。

//添加顯示列
this.tree.Columns.Add(new TreeListColumn{ FieldName= "Name", Caption= "字典類型名稱", Width=160, VisibleIndex =0});
//設(shè)置樹控件的層次關(guān)系及屬性
tree.KeyFieldName = "ID";
tree.ParentFieldName = "PID";
this.tree.OptionsBehavior.Editable = false;
this.tree.OptionsView.EnableAppearanceOddRow = true;
this.tree.OptionsView.EnableAppearanceEvenRow = true;

上面的代碼我們還可以通過擴展函數(shù)對樹列表的處理進行封裝，已達到簡化代碼的目的，如下是處理后的實現(xiàn)代碼：

//控件擴展函數(shù)封裝處理
this.tree.CreateColumn("Name", "字典類型名稱", 160, true);
this.tree.InitTree("ID", "PID", "-1", false, false);

通過添加TreeListColumn對象給TreeList控件就可以實現(xiàn)字段列的顯示了，同時指定數(shù)據(jù)源里面的KeyFieldName和ParentFieldName來設(shè)定層級關(guān)系即可，非常簡單。

而綁定數(shù)據(jù)源，則可以通過一個函數(shù)進行處理，如下所示。

/// 

/// 綁定樹的數(shù)據(jù)源
/// 
private void BindTree()
{
this.tree.DataSource = BLLFactory.Instance.GetAll();
this.tree.ExpandAll();
}

從上面代碼我們可以看到，我們返回的數(shù)據(jù)源，不需要在實體類對象層級具有上下級的關(guān)系，如通過TreeView實現(xiàn)的時候，我們使用了DictTypeNodeInfo 對象是具有上下層級關(guān)系的。

這里只需要使用普通的DictTypeInfo 對象集合即可，通過KeyFieldName和ParentFieldName來設(shè)定層級關(guān)系即可。

為了指定樹形節(jié)點的圖標，我們可以通過代碼進行自定義圖標的處理，如下代碼所示，這樣每個層級的圖標都不一樣，自動實現(xiàn)獲取設(shè)置的處理。

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; };

實現(xiàn)樹節(jié)點選中的事件處理，則需要實現(xiàn)FocusedNodeChanged事件即可。

//初始化樹節(jié)點選擇事件
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();

//控件擴展函數(shù)封裝處理
this.tree.CreateColumn("Name", "字典類型名稱", 160, true);
this.tree.InitTree("ID", "PID", "-1", false, false);

//設(shè)置樹的圖標集合及逐級圖標
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; }; }

三、基于SearchControl控件對節(jié)點進行查詢的操作

上面的處理就是樹列表的一般性展示，如果需要在樹節(jié)點上面增加一個查詢過濾的操作，那么可以使用SearchControl控件進行過濾處理，只需要設(shè)置SearchControl控件的Client屬性，以及實現(xiàn)樹控件的FilterNode事件即可。

/// 

/// 實現(xiàn)樹節(jié)點的過濾查詢
/// 
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");//參數(shù)填寫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;
};
}

實現(xiàn)效果如下所示， 對于符合記錄的查詢，那么會有高亮的顏色進行重點標注。

本文轉(zhuǎn)載自

DevExpress 5月線上公開課報名火熱開啟，教你入門報表（Report）控件

DevExpress技術(shù)交流群：775869749  歡迎一起進群討論

掃描關(guān)注DevExpress中文網(wǎng)微信公眾號，及時獲取最新動態(tài)及最新資訊