如何实现DevExpress开发控件中的AspxTreeList的数据绑定,以及模板运用和外观自定义。为说明这个问题,我们先看下面这幅图。
![](https://www.cnblogs.com/images/cnblogs_com/justice/170472/o_AspxTreeList01.jpg)
了解这幅图后,我们提出这么一些问题:
一、如何绑定数据,显示层级结构。
二、如何在不同的层级节点上显示不同的图标和内容,这里Report View中表现的四层使用的是不同的图标。而在Organisation第一层使用图标,以后的层中却显示文本,并在第三层以后有超链接more追加显示。
三、Report View中Check字段的逻辑值“真”、“假”用图标替换显示。
四、单元格外观定制,这里可以看出,在数值域字段中大于90的底色用浅蓝色显示,其它的用橙色显示。
分析:根据上面的树型图表显示,无外乎难点就是对AspxTreeList模板的一个应用。下面对实现整个效果进行讲解。
绑定数据:该ASPxTreeList可以很容易地填入数据的结合,任何标准的数据源类型,其中包括:SqlDataSource,ObjectDataSource,XmlDataSource,AccessDataSource ,SiteMapDataSource 。你还可以绑定ASPxTreeList的其它代表了树状结构的对象,或手动创建一个树的代码。
E.g.手动创建代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
绑定数据Code
1
using System.Data.OleDb;
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
using DevExpress.Web.ASPxTreeList;
4![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
public partial class _Default : System.Web.UI.Page
{
6![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
protected override void OnInit(EventArgs e)
8![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
base.OnInit(e);
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
InitTreeList(ASPxTreeList2);
14![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
}
16![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
protected void Page_Load(object sender, EventArgs e)
18![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
20![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
ASPxTreeList2.DataBind();
22![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
}
24![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
OleDbDataAdapter CreateDataAdapter()
26![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
28![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
string connectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|Departments.mdb";
30![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
OleDbConnection myConnection = new OleDbConnection(connectionString);
32![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
string query = "SELECT ID, PARENTID, [COUNT], DEPARTMENT, BEIZHU FROM Organisation ";
34![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
return new OleDbDataAdapter(query, myConnection);
36![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
}
38![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
DataTable CreateDataTable(OleDbDataAdapter myAdapter)
40![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
42![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
DataTable dt = new DataTable();
44![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
DataSet testData = new DataSet();
46![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
myAdapter.Fill(testData);
48![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
return testData.Tables[0];
50![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
51
}
52![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
void InitTreeList(ASPxTreeList tl)
54![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
56![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
tl.KeyFieldName = "ID";
58![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
tl.ParentFieldName = "ParentID";
60![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
ASPxTreeList2.DataSource = CreateDataTable(CreateDataAdapter());
62![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
}
64![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
}
66![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
设置模板:像在Organisation中的树型结构和Report View中的Tree字段很显然是使用了多个控件在同一字段区域,这时候我们不得不用模板来实现了。
1. 定义模板:在Organisation中我们首先在DataCellTemplate追加ASPxImage、ASPxTextBox、ASPxLabel、ASPxHyperLink控件。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
定义模板Code
1
<dxwtl:TreeListTextColumn Caption="Organisation" Name="Organisation" VisibleIndex="0">
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
<DataCellTemplate>
4![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
<table runat="server" id="tb1">
6![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
<tr runat="server">
8![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
<td>
10![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
<dxe:ASPxImage ID="ImageOrg" runat="server" IsPng="true" Width="21" Height="21"
12![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
ImageUrl='<%# GetTreeGlyph(2,Container) %>' ImageAlign="Top" Visible="false">
14![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
</dxe:ASPxImage>
16![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
</td>
18![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
<td>
20![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
<dxe:ASPxTextBox ID="txtCount" runat="server" Width="50" Text='<%# Bind("COUNT") %>' Visible="false" >
22![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
</dxe:ASPxTextBox>
24![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
</td>
26![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
<td>
28![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
<dxe:ASPxLabel ID="ASPxLabel3" runat="server" Text='<%# Bind("DEPARTMENT") %>'>
30![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
</dxe:ASPxLabel>
32![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
</td>
34![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
<td>
36![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
<dxe:ASPxHyperLink ID="LinkBeizhu" runat="server" Text='<%# Bind("BEIZHU") %>' Visible="false" Font-Underline="true"
38![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
39
NavigateUrl="http:""www.evget.com">
40![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
41
</dxe:ASPxHyperLink>
42![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
</td>
44![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
45
</tr>
46![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
47
</table>
48![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
49
</DataCellTemplate>
50![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
51
</dxwtl:TreeListTextColumn>
52![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2. 取得节点图片:通过ASPxImage 的ImageUrl='<%# GetTreeGlyph(2,Container) %>'调用服务端的GetTreeGlyph方法返回图片路径来选择当前节点图片。这里Check字段的图片显示方法一样处理只是将Level改为container.Text == "True"。示例代码参考如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
取得节点图片Code
1
public string GetTreeGlyph(int diff,TreeListDataCellTemplateContainer container)
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{ string fmt = @"~/Images/{0}.gif";
4![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
switch (diff)
6![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
8![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
case (int)Diff.NodeGlyph:
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
if (container.Level == 1)
14![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ return string.Format(fmt, "level1"); }
16![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
else if (container.Level == 2)
18![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ return string.Format(fmt, "level2"); }
20![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
else if (container.Level == 3)
22![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ return string.Format(fmt, "level3"); }
24![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
else
26![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ return string.Format(fmt, "level4"); }
28![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
}
30![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
break;
32![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
default:
34![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
return string.Format(fmt, "drop-no");
36![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
break;
38![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
}
40![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
}
42![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3. 设置控件可见属性:在ASPxTreeList_HtmlRowPrepared事件中使用e.NodeKey判断节点层级,运用FindDataCellTemplateControl方法找到匹配的控件,设置属性。示例代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
HtmlRowPrepared事件Code
1
protected void ASPxTreeList2_HtmlRowPrepared(object sender, TreeListHtmlRowEventArgs e)
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
4![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
if (e.NodeKey == "1")
6![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ ASPxImage image = ASPxTreeList2.FindDataCellTemplateControl(e.NodeKey, ASPxTreeList2.Columns["Organisation"] as TreeListDataColumn, "ImageOrg") as ASPxImage;
8![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
image.Visible = true;
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
}
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
}
14![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
单元格定制:为实现Count数据值在大于90的情况下以浅蓝色显示,这个AspxTreeList也提供了对应的事件接口,参考代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
单元格定制Code
1
protected void ASPxTreeList1_HtmlDataCellPrepared(object sender, TreeListHtmlDataCellEventArgs e)
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{ if (e.Column.Name == "COUNT")
4![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
6![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
float value = (float)e.CellValue;
8![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
if (value > 90)
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ e.Cell.BackColor = Color.SkyBlue; }
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
else
14![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ e.Cell.BackColor = Color.Orange; }
16![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
}
18![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
}
20![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
到这里,图片上的显示效果基本实现,至于没提到的部分,都是在上面实现过程中可以通用的。这里就不在累赘讲了。
扫邪者
QQ:283300176
MSN:harries123@hotmail.com