ASPxTreeList及ASPxGridView使用
一. 数据绑定
ASPxTreeList和他数据绑定一样,可用各种类型的数据源。但因为要显示树形结构,
所以除了DataSourceID必须进行设置以外,还得必须设置KeyFieldName与ParentFieldName(ASPxGridView只需指定KeyFieldName),KeyFieldName与ParentFieldName就是主、子的关系,用于创建树形结构。
例如:
AspxTreeList配置:
<dx:ASPxTreeList ID="treeList" DataSourceID="objectDataSource" runat="server" KeyFieldName="Id" ParentFieldName="ParentId" >
</dx:ASPxTreeList>
DataSource配置:
<asp:ObjectDataSource ID="objectDataSource" runat="server" DataObjectTypeName="Entity"
TypeName="Provider" InsertMethod="Insert" DeleteMethod="Delete"
UpdateMethod="Update" SelectMethod="Select">
<UpdateParameters>
<asp:Parameter Name="Id" />
<asp:Parameter Name=" ParentId" />
<asp:Parameter Name="Field1" />
<asp:Parameter Name="Field2" />
</UpdateParameters>
</asp:ObjectDataSource>
后台代码:
public static class Provider
{
private const string key = "EntitiesProvider";
private static HttpSessionState session = HttpContext.Current.Session;
#region private methods
private static List<Entity> Data
{
get
{
if (null == session[key])
Restore();
return session[key] as List<Entity>;
}
}
private static List<Entity> CreateData()
{
}
private static Entity FindItem(Guid id)
{
return Data.Find(Item => Item.Id.ToString().Equals(id.ToString()));
}
#endregion
#region public methods
public static void Restore()
{
session[key] = CreateData();
}
public static IEnumerable Select()
{
return Data;
}
public static void Insert(Entity item)
{
item.Id = Guid.NewGuid();
Data.Add(item);
}
public static void Update(Entity item)
{
Entity storedItem = FindItem(item.Id);
Data.Remove(storedItem);
Data.Add(item);
}
public static void Delete(Entity item)
{
Entity storedItem = FindItem(item.Id);
Data.Remove(storedItem);
}
#endregion
}
[Serializable]
public class Entity
{
/// <summary>
/// ID
/// </summary>
public Guid Id { get; set; }
/// <summary>
/// 父节点ID
/// </summary>
public Guid ParentId { get; set; }
/// <summary>
/// Field1
/// </summary>
public string Field1 { get; set; }
/// <summary>
/// Field2
/// </summary>
public string Field2 { get; set; }
}
同时可以指定在ASPxTreeList默认展开的级数,代码如下:
this.ASPxTreeList1.ExpandToLevel(2); //展开2级
二. 数据导出
关于ASPxTreeList数据导出,DevExpress同样为我们提供了解决方案,即ASPxTreeListExporter数据导出组件。
ASPxTreeListExproter的用法非常简单,同时提供了多种文件格式的导出方案,xls| xlsx|pdf|rft
ASPxGridViewExporter还支持Csv格式导出方案.
使用方法:
1 .向有ASPxTreeList数据的面页添加ASPxTreeListExporter,并设置Exporter的TreeListID属性,即导出哪一个ASPxTreeList.默认不指定的情况下会导出页面中第一个ASPxTreeList,但当有多个时并希望导出指定ASPxTreeList时,则必须指定。
ASPxTreeListExporter
<dx:ASPxTreeListExporter ID="treeListExporter" runat="server" TreeListID="treeList" />
ASPxGridViewExporter
<dx:ASPxGridViewExporter ID="gridViewExporter" runat="server" GridViewID="gridView"/>
2.指定ASPxTreeListExporter的导出方法,格式文件格式和导出策略不同,ASPxTreeListExporter提供了以下方法:
void WritePdf(Stream stream);
void WritePdfToResponse();
void WriteRtf(Stream stream);
void WriteRtfToResponse();
void WriteXls(Stream stream);
void WriteXlsToResponse();
void WriteXlsx(Stream stream);
void WriteXlsxToResponse();
每个方法都有多个重载,可权限需要进行调用。另外需要说明的是,如果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();
例如:
<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>
<dx:ASPxButton ID="ASPxButton1" runat="server"
Text="Show Customization Window"
AutoPostBack="False" ClientInstanceName="btnCustWin"
EnableClientSideAPI="True" UseSubmitBehavior="False">
<ClientSideEvents Click="function(s, e) { CwToggle(); }" />
</dx:ASPxButton>
<dx:ASPxTreeList ID="treeList" runat="server"
AutoGenerateColumns="False"
DataSourceID="AccessDataSource1" Width="100%"
KeyFieldName="ID" ParentFieldName="ParentID"
ClientInstanceName="treeList">
<Columns>
<dx:TreeListDataColumn FieldName="Text" Visible="False" />
</Columns>
<SettingsCustomizationWindow Enabled="True"
PopupHorizontalOffset="2" />
<ClientSideEvents
Init="function() { CwShow(); }"
CustomizationWindowCloseUp="function() { CwHide(); }" />
</dx:ASPxTreeList>
五. 样式设置
常用设置如下:
<Styles AlternatingNode-Enabled="True"></Styles>
<Settings GridLines="Both"
ShowFooter="True"
ShowGroupFooter="True"
ShowPreview="True" />
<SettingsBehavior ExpandCollapseAction="NodeDblClick"
AllowFocusedNode="true" />
<SettingsEditing Mode="EditFormAndDisplayNode"
AllowNodeDragDrop="true" AllowRecursiveDelete="true" />
ShowPreview可显示数据内容较多的View,不影响TreeList的展示。
1.设置ASPxTreeList的PreviewFieldName="Location"
或者<Templates><PreviewRow></PreviewRow></Templates>
2.<Settings ShowPreview="True" />
ASPxGridView还可以设置
<SettingsDetail ShowDetailRow="true"/>
<Templates><DetailRow></DetailRow></Templates>
六. 多表头设置
辅助类:
//***********************************************************************
// File: DynamicHeaderHepler.cs
// Description: 动态生成多表头帮助类
//***********************************************************************
public class DynamicHeaderHepler
{
public static void SetAspxGridViewBand(ASPxGridView gridView)
{
gridView.HtmlRowCreated +=
new ASPxGridViewTableRowEventHandler(GridView_HtmlRowCreated);
}
static void GridView_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)
{
ASPxGridView gridView = sender as ASPxGridView;
if (e.RowType == GridViewRowType.Data &&
e.VisibleIndex == gridView.PageIndex * gridView.SettingsPager.PageSize)
{
Table table = e.Row.Parent as Table;
if (table != null)
{
TableRow row = new TableRow();
TableCell firstBand = GetNewTableCell(row, string.Empty);
foreach (GridViewDataColumn col in gridView.Columns)
{
if (col.Name.IndexOf("|") > 0)
{
string bandname = col.Name.Substring(0, col.Name.IndexOf("|"));
TableCell band = null;
foreach (TableCell t in row.Cells)
{
if (t.Text == bandname)
{
band = t;
break;
}
}
if (band == null)
band = GetNewTableCell(row, bandname);
col.Caption = col.Name.Substring(col.Name.IndexOf("|") + 1);
band.ColumnSpan++;
}
else
firstBand.ColumnSpan++;
}
table.Rows.AddAt(0, row);
}
}
}
//可以在此修改单元格样式
private static TableCell GetNewTableCell(TableRow row, string bandname)
{
TableCell band = new TableCell();
band.Text = bandname;
row.Cells.Add(band);
band.CssClass = "dxgvHeader_Aqua";
band.HorizontalAlign = HorizontalAlign.Center;
band.BorderStyle = BorderStyle.NotSet;
band.BorderColor = row.BorderColor;
return band;
}
}
服务端:
DynamicHeaderHepler.SetAspxGridViewBand(gridView);
gridView.DataBind();
客户端:
<Columns>
<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列1|列11"
Name="列1|列11"></dx:GridViewDataHyperLinkColumn>
<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列1|列12"
Name="列1|列12"> </dx:GridViewDataHyperLinkColumn>
<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列2|列21"
Name="列2|列21"> </dx:GridViewDataHyperLinkColumn>
<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列2|列22"
Name="列2|列22"> </dx:GridViewDataHyperLinkColumn>
</Columns>
七. 其它设置
每行增加增删改按钮:
<dx:TreeListCommandColumn UpdateButton-Text="提交" CancelButton-Text="取消">
<NewButton Text="新增" Visible="true"></NewButton>
<EditButton Text="修改" Visible="true"></EditButton>
<DeleteButton Text="删除" Visible="true"></DeleteButton>
</dx:TreeListCommandColumn>
自定义EditForm:
在配置Columns时通过EditFormSettings设置当前列在EditForm中的显示样式,如下
<dx:TreeListMemoColumn FieldName="Text" Visible="False">
<EditFormSettings VisibleIndex="3" ColumnSpan="2" Visible="true" />
<PropertiesMemo Rows="6" />
<EditFormCaptionStyle VerticalAlign="top" />
</dx:TreeListMemoColumn>
或者通过模板设置,如下
<Templates>
<EditForm>
<dx:ASPxPageControl ID="tabs" runat="server" ActiveTabIndex="0" Width="100%">
<TabPages>
<dx:TabPage Text="Headers">
<ContentCollection>
<dxw:ContentControl runat="server">
<dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="Editors" />
</dxw:ContentControl>
</ContentCollection>
</dx:TabPage>
<dx:TabPage Text="Message">
<ContentCollection>
<dxw:ContentControl runat="server">
<dxe:ASPxMemo ID="message" runat="server" AutoResizeWithContainer="True"
Height="200px" Width="100%"
Text='<%# Eval("Field2") %>' />
</dxw:ContentControl>
</ContentCollection>
</dx:TabPage>
</TabPages>
</dx:ASPxPageControl>
<div style="text-align: right; padding-top: 8px">
<dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="UpdateButton" />
<dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="CancelButton" />
</div>
</EditForm>
</Templates>
八. 选择事件
可添加ASPxTreeList的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);
}" />
服务端:
protected void treeList_CustomDataCallback(object sender, TreeListCustomDataCallbackEventArgs e)
{
string key = e.Argument.ToString();
TreeListNode node = (sender as ASPxTreeList).FindNodeByKeyValue(key);
e.Result = node.GetValue("Field1");
}
ASPxGridView这些工作都可以在客户端完成
如下:
<script language="javascript" type="text/javascript">
function RowClickHandler() {
gridView.GetRowValues(gridView.GetFocusedRowIndex(), 'Field1; Field2', OnGetRowValues);
}
function OnGetRowValues(values) {
alert(values[0]);
alert(values[1]);
}
</script>
<dx:ASPxGridView ID="gridView" runat="server" AutoGenerateColumns="False" ClientInstanceName=" gridView " DataSourceID="supplyBusinessScopeDataSource" KeyFieldName="Id">
<SettingsBehavior EnableRowHotTrack="True" AllowFocusedRow="True" />
<Columns> <dx:GridViewDataTextColumn FieldName="Field1" Visible="True"> </dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Field2" Visible="True"> </dx:GridViewDataTextColumn>
</Columns>
<ClientSideEvents RowClick="RowClickHandler" />
</dx:ASPxGridView>
以下代码设置为可多选,并且可以递归选择。
<SettingsSelection Enabled="True" Recursive="True" />
九. 客户端方法总结
ASPxTreeList:
var key = treeList.GetFocusedNodeKey(); //获取选中行的键值
treeList.PerformCustomDataCallback(key); //回调服务端方法
ASPxGridView:
gridView.PerformCallback (); //Callback
gridView.SelectRows(); //选择全部行
gridView.UnselectRows(); //取消全部行选中状态
gridView.SelectAllRowsOnPage(); //选择当前页全部行
gridView.UnselectAllRowsOnPage(); //取消当前页全部行选中状态
十. 服务端方法总结
ASPxTreeList:
TreeListNode node = treeList.FindNodeByKeyValue(key); //根据键值获取结点
string value = node.GetValue("Field1"); //根据字段名获取数据
ASPxGridView:
gridView.GetMasterRowKeyValue(); //获取Master行键值