您的位置：首页 > 编程语言 > ASP

ASPxTreeList及ASPxGridView使用

2015-12-03 20:05 1146 查看


ASPxTreeList及ASPxGridView使用

时间:2012-05-30 10:00来源:未知 作者:admin 点击: 1542次我要投稿 高质量的ASP.NET空间，完美支持1.0/2.0/3.5/4.0/MVC等

一． 数据绑定

ASPxTreeList和他数据绑定一样，可用各种类型的数据源。但因为要显示树形结构，

所以除了DataSourceID必须进行设置以外，还得必须设置KeyFieldName与ParentFieldName(ASPxGridView只需指定KeyFieldName)，KeyFieldName与ParentFieldName就是主、子的关系，用于创建树形结构。

例如：

AspxTreeList配置:

<dx:ASPxTreeListID="treeList"DataSourceID="objectDataSource" runat="server" KeyFieldName="Id"ParentFieldName="ParentId" >

</dx:ASPxTreeList>

DataSource配置:

<asp:ObjectDataSourceID="objectDataSource"runat="server"DataObjectTypeName="Entity"

TypeName="Provider"InsertMethod="Insert"DeleteMethod="Delete"

UpdateMethod="Update"SelectMethod="Select">

<UpdateParameters>

<asp:ParameterName="Id"/>

<asp:ParameterName=" ParentId"/>

<asp:ParameterName="Field1"/>

<asp:ParameterName="Field2"/>

</UpdateParameters>

</asp:ObjectDataSource>

后台代码:

publicstaticclassProvider

{

privateconststring key = "EntitiesProvider";

privatestaticHttpSessionState session = HttpContext.Current.Session;

#region private methods

privatestaticList<Entity> Data

{

get

{

if (null == session[key])

Restore();

return session[key] asList<Entity>;

}

}

privatestaticList<Entity> CreateData()

{

}

privatestaticEntity FindItem(Guid id)

{

return Data.Find(Item => Item.Id.ToString().Equals(id.ToString()));

}

#endregion

#region public methods

publicstaticvoid Restore()

{

session[key] = CreateData();

}

publicstaticIEnumerable Select()

{

return Data;

}

publicstaticvoid Insert(Entity item)

{

item.Id = Guid.NewGuid();

Data.Add(item);

}

publicstaticvoid Update(Entity item)

{

Entity storedItem = FindItem(item.Id);

Data.Remove(storedItem);

Data.Add(item);

}

publicstaticvoid Delete(Entity item)

{

Entity storedItem = FindItem(item.Id);

Data.Remove(storedItem);

}

#endregion

}

[Serializable]

publicclassEntity

{

///<summary>

/// ID

///</summary>

publicGuid Id { get; set; }

///<summary>

///父节点ID

///</summary>

publicGuid ParentId { get; set; }

///<summary>

/// Field1

///</summary>

publicstring Field1 { get; set; }

///<summary>

/// Field2

///</summary>

publicstring 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 >

<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行键值

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航