在Winform开发框架中使用DevExpress的TreeList和TreeListLookupEdit控件

devexpress提供的树形列表控件treelist和树形下拉列表控件treelistlookupedit都是非常强大的一个控件，它和我们传统winform的treeview控件使用上有所不同，我一般在winform开发中根据情况混合使用这些控件，不过整体来看，基于devexpress的treelist和treelistlookupedit表现相对比较好看一些，本篇随笔主要介绍这两个控件在实际winform项目中的使用处理。

1、devexpress的treelist控件使用

例如在菜单管理中，我们知道菜单一般情况下是层次节点的，我们为了直观显示的需要，一般把菜单用树列表控件进行展示，其中就会用到我们说的treelist控件，如下界面所示。

其中treelist和一个输入searchcontrol来一起协同使用，可以提高界面的友好性，我们可以通过输入关键字进行节点的过滤显示。

如输入过滤内容后查询过滤树列表节点，如下所示，这样可以给用户快速模糊检索指定的树节点。

有了大概的感官认识，我们来了解下treelist控件的使用情况

在菜单界面的设计视图下，我们添加一个contextmenustrip的右键菜单控件，然后编辑一些菜单项目，如下界面所示。

然后拖入一个图片集合的imagecollection控件，并为它增加一些控件图片（也可以保留为空，然后动态指定，如本例一样）

初始化树列表，我们一般分为几个函数，一个是初始化树列表，一个是绑定查询过滤的处理，一个是把数据绑定到树列表上去，如下代码所示。

        private async void frmmenu_load(object sender, eventargs e)
        {
            //列表信息
            inittree();
            initsearchcontrol();
            await bindtree();
        }

上面使用了异步操作，我们一般也可以不用异步，这里根据情况处理吧。

初始化树列表的操作代码如下所示。

        /// <summary>
        /// 初始化树控件
        /// </summary>
        private void inittree()
        {
            this.tree.columns.clear();
//添加显示列
            this.tree.columns.add(new treelistcolumn { fieldname = "id", caption = "id" });//增加一个隐藏的字段，存储需要的id
            this.tree.columns.add(new treelistcolumn { fieldname = "name", caption = "菜单名称", width = 160, visibleindex = 0 });
            //设置树控件的层次关系及属性
            tree.keyfieldname = "id";
            tree.parentfieldname = "pid";
            this.tree.optionsbehavior.editable = false;
            this.tree.optionsview.enableappearanceoddrow = true;
            this.tree.optionsview.enableappearanceevenrow = true;
            this.tree.optionsdraganddrop.dragnodesmode = dragnodesmode.none;//不允许拖动

            //设置树的图标集合及逐级图标
            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;
                var id = string.concat(e.node.getvalue(id_fieldname));
                int index = 0;
                idindexdict.trygetvalue(id, out index);
                e.selectimageindex = index;
            };

            //初始化树节点选择事件
            this.tree.focusednodechanged += delegate (object sender, focusednodechangedeventargs e)
            {
                this.focusednodechanged();
            };
        }
        private async void focusednodechanged()
        {
            if (this.tree.focusednode != null)
            {
                isnormalsearch = false;
                await binddata();
            }
        }

初始化树列表的处理代码，我们还可以使用扩展函数进一步简化它，如下所示。

       /// <summary>
        /// 初始化树控件
        /// </summary>
        private void inittree()
        {
            this.tree.columns.clear();
            this.tree.optionsdraganddrop.dragnodesmode = dragnodesmode.none;//不允许拖动

            //控件扩展函数封装处理
            this.tree.createcolumn("name", "菜单名称", 160, true);
            this.tree.inittree("id", "pid", null, false, false);

            //设置树的图标集合及逐级图标
            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;
                var id = string.concat(e.node.getvalue(id_fieldname));
                int index = 0;
                idindexdict.trygetvalue(id, out index);
                e.selectimageindex = index;
            };

            //初始化树节点选择事件
            this.tree.focusednodechanged += delegate (object sender, focusednodechangedeventargs e)
            {
                this.focusednodechanged();
            };
        }

初始化查询控件searchcontrol的代码如下所示。

/// <summary>
/// 实现树节点的过滤查询
/// </summary>
private void initsearchcontrol()
{
    this.searchcontrol1.client = this.tree;
    this.tree.filternode += (object sender, 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;
    };
}

上面只是初始化树列表控件，我们还需要对它进行数据的绑定显示，树列表的绑定主要代码就是数据绑定和图标的绑定。

this.tree.selectimagelist = this.imagecollection1;
this.tree.datasource = result.items;

不过我们图标由于是从数据源里面动态构建的，因此需要存在一个集合里面，方便赋值给树列表控件，如下是完整的绑定代码。

/// <summary>
/// 绑定树的数据源
/// </summary>
private async task bindtree()
{
    var pagedto = new menupageddto();
    var result = await menuapicaller.instance.getall(pagedto);

    //用来存放对应id和index顺序的
    idindexdict = new dictionary<string, int>();
    //重新刷新节点图片
    this.imagecollection1 = new imagecollection();
    this.imagecollection1.imagesize = new size(16, 16);
    if (result != null && result.items != null)
    {
        foreach (var menuinfo in result.items)
        {
            var image = loadicon(menuinfo);
            this.imagecollection1.images.add(image);
            
            //为每个菜单id添加一个图片序号，方便查找
            if(!idindexdict.containskey(menuinfo.id))
            {
                int index = this.imagecollection1.images.count - 1;//最后一个序号
                idindexdict.add(menuinfo.id, index);
            }
        }
    }
    //imagecollection变化了，需要重新赋值给treelist
    this.tree.selectimagelist = this.imagecollection1;
    this.tree.datasource = result.items;
    this.tree.expandall();
}

如果我们需要获取指定树节点的绑定的值，我们可以通过当前的focusenode获取字段值，如下代码所示。

        /// <summary>
        /// 编辑列表数据
        /// </summary>
        private async task edittreedata()
        {
            string id = string.concat(this.tree.focusednode.getvalue(id_fieldname));
            if (!string.isnullorempty(id))
            {
                frmeditmenu dlg = new frmeditmenu();
                dlg.id = id;
                dlg.ondatasaved += new eventhandler(dlg_ondatasaved);
                dlg.initfunction(loginuserinfo, functiondict);//给子窗体赋值用户权限信息

                if (dialogresult.ok == dlg.showdialog())
                {
                    await bindtree();
                }
            }
        }

以上就是treelist控件的使用过程，主要注意的就是数据源的绑定和图标的绑定操作即可。 

如果我们还允许树列表拖动，以便进行父位置的调整，那么可以对它进行一个拖动的事件处理。

   this.tree.calcnodedragimageindex += new devexpress.xtratreelist.calcnodedragimageindexeventhandler(this.tree_calcnodedragimageindex);
   this.tree.dragdrop += new system.windows.forms.drageventhandler(this.tree_dragdrop);
   this.tree.dragover += new system.windows.forms.drageventhandler(this.tree_dragover);

        private void tree_dragover(object sender, drageventargs e)
        {
            treelistnode dragnode = e.data.getdata(typeof(treelistnode)) as treelistnode;
            e.effect = getdragdropeffect(sender as treelist, dragnode);
        }

        private async void tree_dragdrop(object sender, drageventargs e)
        {
            treelistnode dragnode, targetnode;
            treelist tl = sender as treelist;
            point p = tl.pointtoclient(new point(e.x, e.y));

            dragnode = e.data.getdata(typeof(treelistnode)) as treelistnode;
            targetnode = tl.calchitinfo(p).node;

            //移动后更新数据
            var id = string.concat(dragnode.getvalue("id")).toint64();
            var pid = string.concat(targetnode.getvalue("id")).toint64();
            await organizationunitapicaller.instance.move(new moveorganizationunitdto() { id = id, parentid = pid });
            await bindtree();

            e.effect = dragdropeffects.none;
        }

        private void tree_calcnodedragimageindex(object sender, calcnodedragimageindexeventargs e)
        {
            treelist tl = sender as treelist;
            if (getdragdropeffect(tl, tl.focusednode) == dragdropeffects.none)
                e.imageindex = -1;  // no icon
            else
                e.imageindex = 1;  // the reorder icon (a curved arrow)
        }

 

2、devexpress的treelistlookupedit控件使用

 treelist和treelistlookupedit一般都会成对出现，一般我们需要调整父节点的时候，都会涉及到这个树形的下拉列表treelistlookupedit控件的。

为了方便，我们一般都定义一个自定义控件来处理这些下拉列表的绑定，因此不需要每次都绑定数据以及初始化代码。

        private void functioncontrol_load(object sender, eventargs e)
        {
            if (!this.designmode)
            {
                inittree();
                bindtree();
            }
        }

        /// <summary>
        /// 初始化树
        /// </summary>
        /// <returns></returns>
        private void inittree()
        {
            this.txtmenu.properties.valuemember = "id";
            this.txtmenu.properties.displaymember = "name";

            var tree = this.treelistlookupedit1treelist;
            tree.columns.clear();
            //控件扩展函数封装处理
            tree.createcolumn("name", "菜单名称", 160, true);
            tree.inittree("id", "pid", null, false, false);

            //设置树的图标集合及逐级图标
            tree.selectimagelist = this.imagecollection1;
            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;
            };
        }

        /// <summary>
        /// 绑定树列表
        /// </summary>
        /// <returns></returns>
        public void bindtree()
        {
            var tree = this.treelistlookupedit1treelist;

            //绑定列表数据
            var result = asynccontext.run(() => menuapicaller.instance.getall(new menupageddto() { }));
            if (result != null && result.items != null)
            {
                tree.datasource = result.items;
                tree.expandall();//展开所有
            }

            //执行绑定后处理
            if (databinded != null)
            {
                databinded(null, null);
            }
        }

其中 asynccontext.run 是把异步函数当做同步使用，一般我们在用户控件上，我们都使用同步操作，避免数据绑定延迟导致没有处理

通过制定valuemember和displaymember就可以正常显示内容，以及在后面存储需要的值操作。

  this.txtmenu.properties.valuemember = "id";
  this.txtmenu.properties.displaymember = "name";

treelistlookupedit控件里面还是有一个treelist控件的，这个控件的操作和我们上面说的treelist控件操作完全一样，我们按树列表的方式初始化并绑定它即可。

界面效果如下所示。

树列表控件展开如下所示。