ASPXTreeList

AspxTreeList数据绑定以及模板和外观背景定制的实现

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

 

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

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

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

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

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

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

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

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

　　E.g.手动创建代码

　　绑定数据Code

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　　　　{
10
11　　　　　　base.OnInit(e);
12
13　　　　　　InitTreeList(ASPxTreeList2);
14
15　　　　}
16
17　　　　protected void Page_Load(object sender, EventArgs e)
18
19　　　　{
20
21　　　　　　ASPxTreeList2.DataBind();
22
23　　　　}
24
25　　　　OleDbDataAdapter CreateDataAdapter()
26
27　　　　{
28
29　　　　　　string connectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|Departments.mdb";
30
31　　　　　　OleDbConnection myConnection = new OleDbConnection(connectionString);
32
33　　　　　　string query = "SELECT ID, PARENTID, [COUNT], DEPARTMENT, BEIZHU FROM Organisation ";
34
35　　　　　　return new OleDbDataAdapter(query, myConnection);
36
37　　　　}
38
39　　　　DataTable CreateDataTable(OleDbDataAdapter myAdapter)
40
41　　　　{
42
43　　　　　　DataTable dt = new DataTable();
44
45　　　　　　DataSet testData = new DataSet();
46
47　　　　　　myAdapter.Fill(testData);
48
49　　　　　　return testData.Tables[0];
50
51　　　　}
52
53　　　　void InitTreeList(ASPxTreeList tl)
54
55　　　　{
56
57　　　　　　tl.KeyFieldName = "ID";
58
59　　　　　　tl.ParentFieldName = "ParentID";
60
61　　　　　　ASPxTreeList2.DataSource = CreateDataTable(CreateDataAdapter());
62
63　　　　}
64
65}
66
　　设置模板：像在Organisation中的树型结构和Report View中的Tree字段很显然是使用了多个控件在同一字段区域，这时候我们不得不用模板来实现了。

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

　　定义模板Code

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>
10
11　　　　　　　　　　　　　　　　　　　　　　　 <dxe:ASPxImage ID="ImageOrg" runat="server" IsPng="true" Width="21" Height="21"
12
13　　　　　　　　　　　　　　　　　　　　　　　　　　　　ImageUrl='<%# GetTreeGlyph(2,Container) %>' ImageAlign="Top" Visible="false">
14
15　　　　　　　　　　　　　　　　　　　　　　　 </dxe:ASPxImage>
16
17　　　　　　　　　　　　　　　　　　 </td>
18
19　　　　　　　　　　　　　　　　　　 <td>
20
21　　　　　　　　　　　　　　　　　　　　　　　 <dxe:ASPxTextBox ID="txtCount" runat="server" Width="50" Text='<%# Bind("COUNT") %>' Visible="false" >
22
23　　　　　　　　　　　　　　　　　　　　　　　 </dxe:ASPxTextBox>
24
25　　　　　　　　　　　　　　　　　　 </td>
26
27　　　　　　　　　　　　　　　　　　 <td>
28
29　　　　　　　　　　　　　　　　　　　　　　　 <dxe:ASPxLabel ID="ASPxLabel3" runat="server" Text='<%# Bind("DEPARTMENT") %>'>
30
31　　　　　　　　　　　　　　　　　　　　　　　 </dxe:ASPxLabel>
32
33　　　　　　　　　　　　　　　　　　 </td>
34
35　　　　　　　　　　　　　　　　　　 <td>
36
37　　　　　　　　　　　　　　　　　　　　　　　 <dxe:ASPxHyperLink ID="LinkBeizhu" runat="server" Text='<%# Bind("BEIZHU") %>' Visible="false" Font-Underline="true"
38
39　　　　　　　　　　　　　　　　　　　　　　　　　　　　NavigateUrl="http:""www.programbbs.com">
40
41　　　　　　　　　　　　　　　　　　　　　　　 </dxe:ASPxHyperLink>
42
43　　　　　　　　　　　　　　　　　　 </td>
44
45　　　　　　　　　　　　　　</tr>
46
47　　　　　　　　　 </table>
48
49　　　　 </DataCellTemplate>
50
51</dxwtl:TreeListTextColumn>
52
　　2.　　　　 取得节点图片：通过ASPxImage 的ImageUrl='<%# GetTreeGlyph(2,Container) %>'调用服务端的GetTreeGlyph方法返回图片路径来选择当前节点图片。这里Check字段的图片显示方法一样处理只是将Level改为container.Text == "True"。示例代码参考如下：

　　取得节点图片Code

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:
10
11　　　　　　　　　　{
12
13　　　　　　　　　　　　if (container.Level == 1)
14
15　　　　　　　　　　　　{　 return string.Format(fmt, "level1");　　 }
16
17　　　　　　　　　　　　else if (container.Level == 2)
18
19　　　　　　　　　　　　{　 return string.Format(fmt, "level2");　　 }
20
21　　　　　　　　　　　　else if (container.Level == 3)
22
23　　　　　　　　　　　　{　 return string.Format(fmt, "level3");　　 }
24
25　　　　　　　　　　　　else
26
27　　　　　　　　　　　　{　 return string.Format(fmt, "level4");　　 }
28
29　　　　　　　　　　}
30
31　　　　　break;
32
33　　　　　　　　default:
34
35　　　　　　　　　　return string.Format(fmt, "drop-no");
36
37　　　　　　　　　　break;
38
39　　　　　　}
40
41　　　　}
42
　　3.　 设置控件可见属性：在ASPxTreeList_HtmlRowPrepared事件中使用e.NodeKey判断节点层级，运用FindDataCellTemplateControl方法找到匹配的控件，设置属性。示例代码如下：

　　HtmlRowPrepared事件Code

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;
10
11　 }
12
13}
14

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

　　单元格定制Code

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)
10
11　　　　　　　　{　　e.Cell.BackColor = Color.SkyBlue;　　　　　　　 }
12
13　　　　　　　　else
14
15　　　　　　　　{　　e.Cell.BackColor = Color.Orange;　　　　　　　　}
16
17　　　　　　}
18
19　　　　}
20