在DevExpress程序中使用TeeList控件以及节点查询的处理

在我较早的一篇随笔《在devexpress程序中使用teelist控件以及节点查询的处理》中，介绍了在树形列表treelist控件上面，利用searchcontrol实现节点的模糊查询过滤操作，效果还是非常不错的，treelist功能比较强大，界面也相对比微软内置的winform的treeview控件美观不少。后来在一次偶然过程中，发现treelist控件本身就可以打开头部过滤输入，实现节点的快速过滤，不过过滤是完全匹配方式，和我们常规的模糊匹配思路不一样，本篇随笔介绍对treelist控件常规过滤方式的改进，支持内置输入过滤框中实现节点的模糊查询过滤操作。

1、利用searchcontrol实现节点的模糊查询过滤回顾

我在随笔《在devexpress程序中使用teelist控件以及节点查询的处理》中介绍了整个开发的步骤和思路，最终的实现效果如下所示。

上面那个界面是之前案例的效果，新版本目前已经把不匹配的过滤掉了，最终效果如下所示。

 

 如果我们忽略树列表的初始化操作和绑定数据源的部分，那么实现这个功能，主要的步骤就是在treelist控件上面增加一个searchcontrol的控件，并通代码初始化事件处理即可，如下代码所示。

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

虽然实现的效果非常不错，不过麻烦的地方就是需要自己添加一个控件，并处理好布局和控件的初始化代码，稍显麻烦一些。

下面的处理方式就是打开内置的过滤输入框，并通过代码的方式实现模糊查询的方式过滤操作。

 

2、利用treelist控件内置过滤方式实现模糊查询过滤

上面介绍了一种扩展方式实现节点的模糊查询，我们也可以利用treelist控件本身具有的节点过滤框控件来实现treelist控件节点的过滤。

在treelist控件设计模式下，打开并设置 optionsview.showautofilterrow、optionsbehavior.enablefiltering为true就可以看到树形控件顶部增加一个内置的控件显示了，如下界面所示。

也可以通过代码方式进行打开。

   this.treelist1.optionsview.showautofilterrow = true;//显示过滤行            
   this.treelist1.optionsbehavior.enablefiltering = true;//开启过滤功能

可以看到顶部多了一个输入框，默认的事件就支持对节点的过滤操作，不过是节点名称完全匹配，类似equal的处理方式，这个和我们常规需要的操作方式不同，那么就需要进行一定的改进了。

treelist控件提供columnfilterchanged事件进行自定义的过滤操作，我们在其中实现我们想要的部分匹配，也就是模糊查询方式的处理即可。

            this.treelist1.columnfilterchanged += (s, e) => //自定义过滤事件
            {                
                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 是我们自定义的一个过滤节点操作对象，具体的定义代码如下所示。

    /// <summary>
    /// 过滤节点操作类
    /// </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;
        }
    }

根据上面的操作，做了一个过滤节点的demo界面。

常规没有过滤的界面效果如下所示。

 treelist节点过滤后，界面效果如下所示。

对比之前的searchcontrol实现的效果，这里面没有文本的高亮显示，不过显示也还是比较直观。

整个treelist的控件处理代码如下所示，贴出供大家参考学习。

        /// <summary>
        /// 初始化树
        /// </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;//紧凑型图标
            this.treelist1.expandall();

            // 列过滤处理            
            this.treelist1.optionsview.showautofilterrow = true;//显示过滤行            
            this.treelist1.optionsbehavior.enablefiltering = true;//开启过滤功能
            this.treelist1.columnfilterchanged += (s, e) => //自定义过滤事件
            {                
                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);
                }
            };

            //初始化树节点选择事件
            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)
            {
                //选中节点文本
                var text = tree.focusednode.getdisplaytext(0);
                switch (text)
                {
                    case "采血":
                        childwinmanagement.loadmdiform(this, typeof(frmorganization));
                        break;
                    default:
                        break;
                }
            }
        }

这些就是winform中一些界面处理的技巧，devexpress界面控件的功能还是非常不错的，我们基类一些界面的处理技巧，可以极大提高用户的体验效果，同时提高我们软件的内在价值。