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