DevExpress Asp.net
ASPxCallback控件为我们封装了大量的Ajax操作,使用起来非常的方便,如果页面中遇到需要局部刷的操作而又不想自动动手写ajax的话,使用它就是非常不错选择。ASPxCallback主要是通过注册客户端事件与服务器端的事件来相互通信完成任务。
如何使用ASPXCallback:
- 向页面添加CallBack组件,并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="Callback1")。
- 注册CallBack组件的服务器端事件ASPxCallback_Callback,这个方法就是客户端将要调用的服务器端的处理程序。
- 注册CallBack组件的CallbackComplete事件,引事件是当回调完服务器事件之后自动调用的,可用来处理回调完之后的操作,并可通过参数e获取parameter和设置返回的result的值。
- 在客户端用户CallBack组件的客户端方法PerformCallback方法,以调用服务器端的ASPxCallback_Callback事件。
代码:Callback1.PerformCallback(id) - CallBack组件自动调用CallbackComplete事件,完成此次操作。
下面这个例子将说明如何通过客户端启用服务器端的方法来更新DIV中的数据。
HTML代码
三个DIV,每个DIV分别有一个<a/>标签,通过调用Javascript函数ShowDetails来更新DIV的内容,其中参数为Div ID的最后一个数字。ASPxCallback组件同时注册服务器的OnCallback事件,用来处理回调时处理,ClientSideEvents的 CallbackComplete方法当回调完成时将自动调用。
JS,通过Callback1.PerformCallback(id)调用服务器的OnCallback事件
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
<script type="text/javascript"><!--
function GetDetailsContainer(id) {
return document.getElementById("Detail" + id.toString());
}
function ShowDetails(id) {
GetDetailsContainer(id).innerHTML = "Loading…";
Callback1.PerformCallback(id); //回调方法,将调用服务器端注册的Callback方法。
}
//--></script>
HTML:
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
<div id="Detail1">
<a href="javascript:ShowDetails('1');">Show Detail</a>
</div>
<div id="Detail2">
<a href="javascript:ShowDetails('2');">Show Detail</a>
</div>
<div id="Detail3">
<a href="javascript:ShowDetails('3');">Show Detail</a>
</div>
<dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="Callback1"
OnCallback="ASPxCallback1_Callback">
<ClientSideEvents CallbackComplete="function(s, e) {
var element = GetDetailsContainer(e.parameter);
element.innerHTML = e.result;
}" />
</dxcb:ASPxCallback>
<!--
-------------------------------------------------
CallbackComplete 方法原型:
function ASPxClientCallbackCompleteEventHandler(
source : object,
e : ASPxClientCallbackCompleteEventArgs
) : Void;
parameter:获取AspxCallBack进行回调的参数值。
result:获取回调之后的结果值。
这个方法会在回调完成之后自动的调用。
------------------------------------------------
-->
C#,在OnCallback事件中接受客户端传递过来的参数,以进行判断是更新的哪一个DIV,并通过e.Result返回处理后的结果:
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5PFM0-11GO.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q52260-144I4.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5Q25T0-131336.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5R0F40-1DM2.jpg)
![](http://52net.org/uploads/allimg/c090727/124VJ5R35D0-1J023.jpg)
最后,Aspx系列控件的所有的客户端回调都是通过这种模块完成的,如设置Aspx的ClientInstanceName属性,添加注册Aspx服务器端的Callback方法,在客户端调用Aspx的PerformCallback()方法等。这种模式在以后的使用过程中会经常的见到。
DevExpress Asp.net(4) ASPxCallbackPanel的基本使用
DevExpress Asp.net(7) ASPxTreeList的基本使用之一
ASPxTreeList是结合了Tree控件与GridView控件,不仅可以显示树形结构视图,而且可以还编辑/删除/统计等制作,以下只是进行了一些基本的AspxTreeList操作的总结.
此事例主要说明了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" />
演示代码:
Js:
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
<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();
}
</script>
HTML:
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
<%-- 导出代码--%>
<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>
<dxwtl:ASPxTreeListExporter ID="ASPxTreeListExporter1" runat="server" TreeListID="ASPxTreeList2">
</dxwtl:ASPxTreeListExporter>
<%-- 显示控制面板--%>
<dxe:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="false" Text="Show Customer Window">
<ClientSideEvents Click="function(s, e) { CwToggle(); }" />
</dxe:ASPxButton>
<%-- ASPxTreeList--%>
<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>
C#:
![](http://52net.org/uploads/allimg/c090727/124VJ5P44430-10V43.jpg)
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataBind();
this.ASPxTreeList1.ExpandToLevel(2);
}
}
// 导出xls
protected void ASPxButton1_Click(object sender, EventArgs e)
{
ASPxTreeListExporter1.WriteXlsToResponse();
}
//导出pdf
protected void ASPxButton2_Click(object sender, EventArgs e)
{
ASPxTreeListExporter1.Settings.ExpandAllNodes = true;
ASPxTreeListExporter1.Settings.ExportAllPages = true;
ASPxTreeListExporter1.Settings.ShowTreeButtons = true;
ASPxTreeListExporter1.WritePdfToResponse();
}
protected void ASPxTreeList1_CustomDataCallback(object sender, DevExpress.Web.ASPxTreeList.TreeListCustomDataCallbackEventArgs e)
{
e.Result = "Key=" + e.Argument;
}