DevExpress Asp.net ASPxTreeList的基本使用之一 DevExpress Asp.net ASPxTreeList的基本使用之一
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wServices/archive/2009/07/25/4378771.aspx
DevExpress Asp.net ASPxTreeList的基本使用之一
2010-10-06 15:42:48| 分类： DevExpress控件|字号 订阅
此事例主要说明了ASPxTreeList的一些基本使用
1 数据绑定
2 数据导出
3 分页设置
4 用户弹出面板设置
5 样式设置
6 ShowPreview
8 数据模板
9 选择事件
10 数据统计
绑定绑定
ASPxTreeList其他数据绑定一样，可用各种类型的数据源。但因为要显示树形结构，
所以除了DataSourceID必须进行设置以外，还得必须设置KeyFieldName与ParentFieldName，
KeyFieldName与ParentFieldName就是主、子的关系，用于创建树形结构。
同时可以指定在ASPxTreeList默认展开的级数，代码如下：
this.ASPxTreeList1.ExpandToLevel(2); //展开2级
数据导出
关于ASPxTreeList数据导出，DevExpress同样为我们提供了解决方案，即ASPxTreeListExporter,
数据导出组件。
ASPxTreeListExproter的用法非常简单，但同时提供了3种文件格式的导出方案，xls|pdf|rft
使用方法：
1 向有ASPxTreeList数据的面页添加ASPxTreeListExporter，并设置Exporter的TreeListID属
性，即导出哪一个ASPxTreeList.默认不指定的情况下会导出页面中第一个ASPxTreeList，但
当有多个时并希望导出指定ASPxTreeList时，则必须指定。
2 指定ASPxTreeListExporter的导出方法，格式文件格式和导出策略不同，ASPxTreeListExporter
提供了以下方法：
void WritePdf(Stream stream);
void WritePdfToResponse();
void WriteRtf(Stream stream);
void WriteRtfToResponse();
void WriteXls(Stream stream);
void WriteXlsToResponse();
每个方法都有多个重载，可权限需要进行调用。另外需要说明的是，如果ASPxTreeList设置的分页
功能，调用以下方法时可能出现只导出当前面的现象，所以调用以上方法进，可以设置导出的详细
设置，如下：
ASPxTreeListExporter.Settings.ExpandAllNodes = true;
ASPxTreeListExporter.Settings.ExportAllPages = true;
ASPxTreeListExporter.Settings.ShowTreeButtons = true;
分面设置
默认情况下，ASPxTreeList不进行分页处理，如果需要分面功能，可以设置其属性SettingsPager
如下代码：
<SettingsPager AlwaysShowPager="True" Mode="ShowPager">
</SettingsPager>
默认页大小为10，可以通过SettingPager的 PageSize属性设置，PageSize="20"
用户弹出面板设置
即让用户自定义ASPxTreeList显示的字段名称，如下设置
<SettingsCustomizationWindow Enabled="True" />
如果当某一字段在初始时设置Visible=false，那么此字段将会放在CustomizationWindow中，
当然，用户也可以把它拖放出来，也可以拖放进去。以下代码就是控制如果显示与隐藏
CustomizationWindow.
treeList.ShowCustomizationWindow(); //ClientInstanceName="treeList"
treeList.HideCustomizationWindow();
样式设置
样式设置最基本就是设置边框样式、页脚、tree线等。如下
<Settings GridLines="Both"
ShowFooter="True"
ShowGroupFooter="True"
ShowPreview="True" />
ShowPreview
可显示数据内容较多的View，不影响TreeList的展示。
1 设置ASPxTreeList的PreviewFieldName="Location"
2 <Settings ShowPreview="True" />
数据模板
<Templates>
<DataCell>
<%# Eval("Common_Name") %>
</DataCell>
</Templates>
选择事件
可添加treelist的FocuseNodeChnaged事件来处理选择Node时的逻辑，但ASPxTreeList必须
设置AllowFocusedNode=true，如下：
<SettingsBehavior AllowFocusedNode="True" />
通过FocuseNodeChnaged事件来回调整ASPxTreeList的服务端事件来完成通信，发下：
<ClientSideEvents CustomDataCallback="function(s, e) {
alert(e.result);
}" FocusedNodeChanged="function(s, e) {
var key = treeList.GetFocusedNodeKey();
treeList.PerformCustomDataCallback(key);
}" />
以下代码设置为可多选，并且可以递归选择。
<SettingsSelection Enabled="True" Recursive="True" />
数据统计
<Summary>
<dxwtl:TreeListSummaryItem
DisplayFormat="Count={0}" //显示格式
FieldName="Department" //数据统计字段
ShowInColumn="Department" //显示的位置字段
SummaryType="Count" /> //统计类型
<dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget"
ShowInColumn="Budget" SummaryType="Sum" />
</Summary>
ASPxTreeList的数据统计显示与ASPxGridview基本相同。
代码：
view plaincopy to clipboardprint?
01.<mce:script type="text/javascript"><!--
02. function CwShow() {
03. treeList.ShowCustomizationWindow();
04. btnCustWin.SetText("Hide Customization Window");
05. }
06. function CwHide() {
07. treeList.HideCustomizationWindow();
08. btnCustWin.SetText("Show Customization Window");
09. }
10. function CwToggle() {
11. if (treeList.IsCustomizationWindowVisible())
12. CwHide();
13. else
14. CwShow();
15. }
16.
17./ --></mce:script>
<mce:script type="text/javascript"><!--
function CwShow() {
treeList.ShowCustomizationWindow();
btnCustWin.SetText("Hide Customization Window");
}
function CwHide() {
treeList.HideCustomizationWindow();
btnCustWin.SetText("Show Customization Window");
}
function CwToggle() {
if (treeList.IsCustomizationWindowVisible())
CwHide();
else
CwShow();
}
// --></mce:script>
HTML:
view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······15001. <dxe:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="Export to XLS">
02. </dxe:ASPxButton>
03. <dxe:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Export to PDF">
04. </dxe:ASPxButton>
05. <dxe:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="false" Text="Show Customer Window">
06. <ClientSideEvents Click="function(s, e) { CwToggle(); }" />
07. </dxe:ASPxButton>
08.
09. <dxwtl:ASPxTreeListExporter ID="ASPxTreeListExporter1" runat="server" TreeListID="ASPxTreeList2">
10. </dxwtl:ASPxTreeListExporter>
11.
12. <dxwtl:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False"
13. ClientInstanceName="treeList" DataSourceID="AccessDataSource1"
14. Width="100%" KeyFieldName="ID"
15. ParentFieldName="ParentID" PreviewFieldName="Location"
16. oncustomdatacallback="ASPxTreeList1_CustomDataCallback">
17. <ClientSideEvents CustomDataCallback="function(s, e) {
18. alert(e.result);
19.}" FocusedNodeChanged="function(s, e) {
20. var key = treeList.GetFocusedNodeKey();
21. treeList.PerformCustomDataCallback(key);
22.}" />
23. <Columns>
24. <dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="1">
25. </dxwtl:TreeListTextColumn>
26. <dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="2" AllowSort="True" SortIndex="0"
27. SortOrder="Ascending">
28. </dxwtl:TreeListTextColumn>
29. <dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="3">
30. </dxwtl:TreeListTextColumn>
31. <dxwtl:TreeListTextColumn FieldName="Phone1" VisibleIndex="4">
32. </dxwtl:TreeListTextColumn>
33. <dxwtl:TreeListTextColumn FieldName="Phone2" VisibleIndex="5" Visible="false">
34. </dxwtl:TreeListTextColumn>
35. </Columns>
36. <SettingsSelection Enabled="True" Recursive="True" />
37. <Summary>
38. <dxwtl:TreeListSummaryItem DisplayFormat="Count={0}" FieldName="Department"
39. ShowInColumn="Department" SummaryType="Count" />
40. <dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget"
41. ShowInColumn="Budget" SummaryType="Sum" />
42. </Summary>
43. <SettingsPager AlwaysShowPager="True" Mode="ShowPager" PageSize="20">
44. </SettingsPager>
45. <Settings GridLines="Both" ShowFooter="True" ShowGroupFooter="True" ShowPreview="True" />
46. <SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="True" />
47. <SettingsCustomizationWindow Enabled="True" />
48. </dxwtl:ASPxTreeList>
49. <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/DataSources/Departments.mdb"
50. SelectCommand="SELECT * FROM [Departments]" />
51.
52. <dxwtl:ASPxTreeList ID="ASPxTreeList2" runat="server" AutoGenerateColumns="False"
53. DataSourceID="SiteMapDataSource1">
54. <SettingsPager AlwaysShowPager="True" ShowSeparators="True" Mode="ShowPager">
55. </SettingsPager>
56. <Columns>
57. <dxwtl:TreeListTextColumn FieldName="Title" ReadOnly="True" VisibleIndex="1">
58. </dxwtl:TreeListTextColumn>
59. <dxwtl:TreeListTextColumn FieldName="Url" ReadOnly="True" VisibleIndex="2">
60. </dxwtl:TreeListTextColumn>
61. <dxwtl:TreeListTextColumn FieldName="Description" ReadOnly="True" VisibleIndex="3">
62. </dxwtl:TreeListTextColumn>
63. </Columns>
64. </dxwtl:ASPxTreeList>
65.
66. <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<dxe:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="Export to XLS">
</dxe:ASPxButton>
<dxe:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Export to PDF">
</dxe:ASPxButton>
<dxe:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="false" Text="Show Customer Window">
<ClientSideEvents Click="function(s, e) { CwToggle(); }" />
</dxe:ASPxButton>
<dxwtl:ASPxTreeListExporter ID="ASPxTreeListExporter1" runat="server" TreeListID="ASPxTreeList2">
</dxwtl:ASPxTreeListExporter>
<dxwtl:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False"
ClientInstanceName="treeList" DataSourceID="AccessDataSource1"
Width="100%" KeyFieldName="ID"
ParentFieldName="ParentID" PreviewFieldName="Location"
oncustomdatacallback="ASPxTreeList1_CustomDataCallback">
<ClientSideEvents CustomDataCallback="function(s, e) {
alert(e.result);
}" FocusedNodeChanged="function(s, e) {
var key = treeList.GetFocusedNodeKey();
treeList.PerformCustomDataCallback(key);
}" />
<Columns>
<dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="1">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="2" AllowSort="True" SortIndex="0"
SortOrder="Ascending">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="3">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Phone1" VisibleIndex="4">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Phone2" VisibleIndex="5" Visible="false">
</dxwtl:TreeListTextColumn>
</Columns>
<SettingsSelection Enabled="True" Recursive="True" />
<Summary>
<dxwtl:TreeListSummaryItem DisplayFormat="Count={0}" FieldName="Department"
ShowInColumn="Department" SummaryType="Count" />
<dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget"
ShowInColumn="Budget" SummaryType="Sum" />
</Summary>
<SettingsPager AlwaysShowPager="True" Mode="ShowPager" PageSize="20">
</SettingsPager>
<Settings GridLines="Both" ShowFooter="True" ShowGroupFooter="True" ShowPreview="True" />
<SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="True" />
<SettingsCustomizationWindow Enabled="True" />
</dxwtl:ASPxTreeList>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/DataSources/Departments.mdb"
SelectCommand="SELECT * FROM [Departments]" />
<dxwtl:ASPxTreeList ID="ASPxTreeList2" runat="server" AutoGenerateColumns="False"
DataSourceID="SiteMapDataSource1">
<SettingsPager AlwaysShowPager="True" ShowSeparators="True" Mode="ShowPager">
</SettingsPager>
<Columns>
<dxwtl:TreeListTextColumn FieldName="Title" ReadOnly="True" VisibleIndex="1">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Url" ReadOnly="True" VisibleIndex="2">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Description" ReadOnly="True" VisibleIndex="3">
</dxwtl:TreeListTextColumn>
</Columns>
</dxwtl:ASPxTreeList>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
C#代码：
view plaincopy to clipboardprint?
01.{
02. if (!IsPostBack)
03. {
04. DataBind();
05. this.ASPxTreeList1.ExpandToLevel(2);
06. }
07. }
08.
09. // 导出xls
10. protected void ASPxButton1_Click(object sender, EventArgs e)
11. {
12. ASPxTreeListExporter1.WriteXlsToResponse();
13. }
14.
15. //导出pdf
16. protected void ASPxButton2_Click(object sender, EventArgs e)
17. {
18. ASPxTreeListExporter1.Settings.ExpandAllNodes = true;
19. ASPxTreeListExporter1.Settings.ExportAllPages = true;
20. ASPxTreeListExporter1.Settings.ShowTreeButtons = true;
21. ASPxTreeListExporter1.WritePdfToResponse();
22. }
23.
24.
25. protected void ASPxTreeList1_CustomDataCallback(object sender, DevExpress.Web.ASPxTreeList.TreeListCustomDataCallbackEventArgs e)
26. {
27. e.Result = "Key=" + e.Argument;
28. }