AspxTreeList数据绑定以及模板和外观定制的运用

如何实现DevExpress开发控件中的AspxTreeList的数据绑定，以及模板运用和外观自定义。为说明这个问题，我们先看下面这幅图。

 

了解这幅图后，我们提出这么一些问题：

一、如何绑定数据，显示层级结构。

二、如何在不同的层级节点上显示不同的图标和内容，这里Report View中表现的四层使用的是不同的图标。而在Organisation第一层使用图标，以后的层中却显示文本，并在第三层以后有超链接more追加显示。

三、Report View中Check字段的逻辑值“真”、“假”用图标替换显示。

四、单元格外观定制，这里可以看出，在数值域字段中大于90的底色用浅蓝色显示，其它的用橙色显示。

分析：根据上面的树型图表显示，无外乎难点就是对AspxTreeList模板的一个应用。下面对实现整个效果进行讲解。

绑定数据：该ASPxTreeList可以很容易地填入数据的结合，任何标准的数据源类型，其中包括:SqlDataSource,ObjectDataSource,XmlDataSource，AccessDataSource ，SiteMapDataSource 。你还可以绑定ASPxTreeList的其它代表了树状结构的对象，或手动创建一个树的代码。

E.g.手动创建代码

 1using System.Data.OleDb;
 2
 3using DevExpress.Web.ASPxTreeList;
 4
 5public partial class _Default : System.Web.UI.Page {
 6
 7        protected override void OnInit(EventArgs e)
 8
 9        {

            base.OnInit(e);

            InitTreeList(ASPxTreeList2);

        }

        protected void Page_Load(object sender, EventArgs e)

        {

            ASPxTreeList2.DataBind();

        }

        OleDbDataAdapter CreateDataAdapter()

        {

            string connectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|Departments.mdb";

            OleDbConnection myConnection = new OleDbConnection(connectionString);

            string query = "SELECT ID, PARENTID, [COUNT], DEPARTMENT, BEIZHU FROM Organisation ";

            return new OleDbDataAdapter(query, myConnection);

        }

        DataTable CreateDataTable(OleDbDataAdapter myAdapter)

        {

            DataTable dt = new DataTable();

            DataSet testData = new DataSet();

            myAdapter.Fill(testData);

            return testData.Tables[0];

        }

        void InitTreeList(ASPxTreeList tl)

        {

            tl.KeyFieldName = "ID";

            tl.ParentFieldName = "ParentID";

            ASPxTreeList2.DataSource = CreateDataTable(CreateDataAdapter());

        }

}

设置模板：像在Organisation中的树型结构和Report View中的Tree字段很显然是使用了多个控件在同一字段区域，这时候我们不得不用模板来实现了。

1.   定义模板：在Organisation中我们首先在DataCellTemplate追加ASPxImage、ASPxTextBox、ASPxLabel、ASPxHyperLink控件。

 1<dxwtl:TreeListTextColumn Caption="Organisation" Name="Organisation" VisibleIndex="0">
 2
 3         <DataCellTemplate>
 4
 5                   <table runat="server" id="tb1">
 6
 7                            <tr runat="server">
 8
 9                                     <td>

                                               <dxe:ASPxImage ID="ImageOrg" runat="server" IsPng="true" Width="21" Height="21"

                                                        ImageUrl='<%# GetTreeGlyph(2,Container) %>' ImageAlign="Top" Visible="false">

                                               </dxe:ASPxImage>

                                     </td>

                                     <td>

                                               <dxe:ASPxTextBox ID="txtCount" runat="server" Width="50" Text='<%# Bind("COUNT") %>' Visible="false" >

                                               </dxe:ASPxTextBox>

                                     </td>

                                     <td>

                                               <dxe:ASPxLabel ID="ASPxLabel3" runat="server" Text='<%# Bind("DEPARTMENT") %>'>

                                               </dxe:ASPxLabel>

                                     </td>

                                     <td>

                                               <dxe:ASPxHyperLink ID="LinkBeizhu" runat="server" Text='<%# Bind("BEIZHU") %>' Visible="false" Font-Underline="true"

                                                        NavigateUrl="http:""www.evget.com">

                                               </dxe:ASPxHyperLink>

                                     </td>

                            </tr>

                   </table>

         </DataCellTemplate>

</dxwtl:TreeListTextColumn>

2.         取得节点图片：通过ASPxImage 的ImageUrl='<%# GetTreeGlyph(2,Container) %>'调用服务端的GetTreeGlyph方法返回图片路径来选择当前节点图片。这里Check字段的图片显示方法一样处理只是将Level改为container.Text == "True"。示例代码参考如下：

 1 public string GetTreeGlyph(int diff,TreeListDataCellTemplateContainer container)
 2
 3        {   string fmt = @"~/Images/{0}.gif";
 4
 5            switch (diff)
 6
 7            {
 8
 9                case (int)Diff.NodeGlyph:

                    {

                        if (container.Level == 1)

                        {   return string.Format(fmt, "level1");     }

                        else if (container.Level == 2)

                        {   return string.Format(fmt, "level2");     }

                        else if (container.Level == 3)

                        {   return string.Format(fmt, "level3");     }

                        else

                        {   return string.Format(fmt, "level4");     }

                    }

          break;

                default:

                    return string.Format(fmt, "drop-no");

                    break;

            }

        }

3.   设置控件可见属性：在ASPxTreeList_HtmlRowPrepared事件中使用e.NodeKey判断节点层级，运用FindDataCellTemplateControl方法找到匹配的控件，设置属性。示例代码如下：

 

HtmlRowPrepared事件
 1protected void ASPxTreeList2_HtmlRowPrepared(object sender, TreeListHtmlRowEventArgs e)
 2
 3        {
 4
 5            if (e.NodeKey == "1")
 6
 7            {  ASPxImage image = ASPxTreeList2.FindDataCellTemplateControl(e.NodeKey, ASPxTreeList2.Columns["Organisation"] as TreeListDataColumn, "ImageOrg") as ASPxImage;
 8
 9                image.Visible = true;

   }

}

 

单元格定制：为实现Count数据值在大于90的情况下以浅蓝色显示，这个AspxTreeList也提供了对应的事件接口，参考代码如下：

 1 protected void ASPxTreeList1_HtmlDataCellPrepared(object sender, TreeListHtmlDataCellEventArgs e)
 2
 3        {   if (e.Column.Name == "COUNT")
 4
 5            {
 6
 7                float value = (float)e.CellValue;
 8
 9                if (value > 90)

                {    e.Cell.BackColor = Color.SkyBlue;               }

                else

                {    e.Cell.BackColor = Color.Orange;                }

            }

        }

     

 

到这里，图片上的显示效果基本实现，至于没提到的部分，都是在上面实现过程中可以通用的。这里就不在累赘讲了。

 

扫邪者

QQ:283300176

MSN:harries123@hotmail.com