如何实现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