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

在我較早的一篇隨筆《在DevExpress程序中使用TeeList控件以及節(jié)點(diǎn)查詢的處理》中，介紹了在樹(shù)形列表TreeList控件上面，利用SearchControl實(shí)現(xiàn)節(jié)點(diǎn)的模糊查詢過(guò)濾操作，效果還是非常不錯(cuò)的，TreeList功能比較強(qiáng)大，界面也相對(duì)比微軟內(nèi)置的Winform的TreeView控件美觀不少。后來(lái)在一次偶然過(guò)程中，發(fā)現(xiàn)TreeList控件本身就可以打開(kāi)頭部過(guò)濾輸入，實(shí)現(xiàn)節(jié)點(diǎn)的快速過(guò)濾，不過(guò)過(guò)濾是完全匹配方式，和我們常規(guī)的模糊匹配思路不一樣，本篇隨筆介紹對(duì)TreeList控件常規(guī)過(guò)濾方式的改進(jìn)，支持內(nèi)置輸入過(guò)濾框中實(shí)現(xiàn)節(jié)點(diǎn)的模糊查詢過(guò)濾操作。

一、利用SearchControl實(shí)現(xiàn)節(jié)點(diǎn)的模糊查詢過(guò)濾回顧

在《在DevExpress程序中使用TeeList控件以及節(jié)點(diǎn)查詢的處理》中介紹了整個(gè)開(kāi)發(fā)的步驟和思路，最終的實(shí)現(xiàn)效果如下所示。

上面那個(gè)界面是之前案例的效果，新版本目前已經(jīng)把不匹配的過(guò)濾掉了，最終效果如下所示。

如果我們忽略樹(shù)列表的初始化操作和綁定數(shù)據(jù)源的部分，那么實(shí)現(xiàn)這個(gè)功能，主要的步驟就是在TreeList控件上面增加一個(gè)SearchControl的控件，并通代碼初始化事件處理即可，如下代碼所示。

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

 雖然實(shí)現(xiàn)的效果非常不錯(cuò)，不過(guò)麻煩的地方就是需要自己添加一個(gè)控件，并處理好布局和控件的初始化代碼，稍顯麻煩一些。

下面的處理方式就是打開(kāi)內(nèi)置的過(guò)濾輸入框，并通過(guò)代碼的方式實(shí)現(xiàn)模糊查詢的方式過(guò)濾操作。

二、利用TreeList控件內(nèi)置過(guò)濾方式實(shí)現(xiàn)模糊查詢過(guò)濾

上面介紹了一種擴(kuò)展方式實(shí)現(xiàn)節(jié)點(diǎn)的模糊查詢，我們也可以利用TreeList控件本身具有的節(jié)點(diǎn)過(guò)濾框控件來(lái)實(shí)現(xiàn)TreeList控件節(jié)點(diǎn)的過(guò)濾。

在TreeList控件設(shè)計(jì)模式下，打開(kāi)并設(shè)置 OptionsView.ShowAutoFilterRow、OptionsBehavior.EnableFiltering為True就可以看到樹(shù)形控件頂部增加一個(gè)內(nèi)置的控件顯示了，如下界面所示。

也可以通過(guò)代碼方式進(jìn)行打開(kāi)。

this.treeList1.OptionsView.ShowAutoFilterRow = true;//顯示過(guò)濾行 
this.treeList1.OptionsBehavior.EnableFiltering = true;//開(kāi)啟過(guò)濾功能

可以看到頂部多了一個(gè)輸入框，默認(rèn)的事件就支持對(duì)節(jié)點(diǎn)的過(guò)濾操作，不過(guò)是節(jié)點(diǎn)名稱完全匹配，類似Equal的處理方式，這個(gè)和我們常規(guī)需要的操作方式不同，那么就需要進(jìn)行一定的改進(jìn)了。

TreeList控件提供ColumnFilterChanged事件進(jìn)行自定義的過(guò)濾操作，我們?cè)谄渲袑?shí)現(xiàn)我們想要的部分匹配，也就是模糊查詢方式的處理即可。

this.treeList1.ColumnFilterChanged += (s, e) => //自定義過(guò)濾事件
{ 
var tree = (TreeList)s;
if (tree != null && tree.ActiveEditor != null)
{
string newKey = tree.ActiveEditor.EditValue.ToString();
tree.FilterNodes();

var operation = new FilterNodeOperation(newKey ?? "");
tree.NodesIterator.DoOperation(operation);
}
};

其中FilterNodeOperation 是我們自定義的一個(gè)過(guò)濾節(jié)點(diǎn)操作對(duì)象，具體的定義代碼如下所示。

/// <summary>
/// 過(guò)濾節(jié)點(diǎn)操作類
/// </summary>
class FilterNodeOperation : TreeListOperation
{
string pattern;
public FilterNodeOperation(string _pattern) { pattern = _pattern; }

public override void Execute(TreeListNode node)
{
if (NodeContainsPattern(node, pattern))
{
node.Visible = true;
if (node.ParentNode != null)
{
node.ParentNode.Visible = true;
}
}
else
{
node.Visible = false;
}
}

/// <summary>
/// 模糊包含模式
/// </summary>
bool NodeContainsPattern(TreeListNode node, string pattern)
{
foreach (TreeListColumn col in node.TreeList.Columns)
{
if (node.GetValue(col).ToString().ToUpper().Contains(pattern.ToUpper()))
{
return true;
}
}
return false;
}
}

根據(jù)上面的操作，做了一個(gè)過(guò)濾節(jié)點(diǎn)的Demo界面。常規(guī)沒(méi)有過(guò)濾的界面效果如下所示。

TreeList節(jié)點(diǎn)過(guò)濾后，界面效果如下所示。

對(duì)比之前的SearchControl實(shí)現(xiàn)的效果，這里面沒(méi)有文本的高亮顯示，不過(guò)顯示也還是比較直觀。

整個(gè)TreeList的控件處理代碼如下所示，貼出供大家參考學(xué)習(xí)。

/// <summary>
/// 初始化樹(shù)
/// </summary>
private void InitTree()
{
this.treeList1.OptionsBehavior.Editable = false;
this.treeList1.OptionsView.EnableAppearanceOddRow = true;
this.treeList1.OptionsView.EnableAppearanceEvenRow = true;
this.treeList1.OptionsView.RowImagesShowMode = RowImagesShowMode.InCell;//緊湊型圖標(biāo)
this.treeList1.ExpandAll();

// 列過(guò)濾處理 
this.treeList1.OptionsView.ShowAutoFilterRow = true;//顯示過(guò)濾行 
this.treeList1.OptionsBehavior.EnableFiltering = true;//開(kāi)啟過(guò)濾功能
this.treeList1.ColumnFilterChanged += (s, e) => //自定義過(guò)濾事件
{ 
var tree = (TreeList)s;
if (tree != null && tree.ActiveEditor != null)
{
string newKey = tree.ActiveEditor.EditValue.ToString();
tree.FilterNodes();

var operation = new FilterNodeOperation(newKey ?? "");
tree.NodesIterator.DoOperation(operation);
}
};

//初始化樹(shù)節(jié)點(diǎn)選擇事件
this.treeList1.FocusedNodeChanged += (s, e) =>
{
this.FocusedNodeChanged(s, e);
};
}

private void FocusedNodeChanged(object s, FocusedNodeChangedEventArgs e)
{
var tree = (TreeList)s;
if (tree != null && tree.FocusedNode != null)
{
//選中節(jié)點(diǎn)文本
var text = tree.FocusedNode.GetDisplayText(0);
switch (text)
{
case "采血":
ChildWinManagement.LoadMdiForm(this, typeof(FrmOrganization));
break;
default:
break;
}
}
}

這些就是Winform中一些界面處理的技巧，DevExpress界面控件的功能還是非常不錯(cuò)的，我們基類一些界面的處理技巧，可以極大提高用戶的體驗(yàn)效果，同時(shí)提高我們軟件的內(nèi)在價(jià)值。

本文轉(zhuǎn)載自

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

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