ASPxTreeList及ASPxGridView使用

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行键值
时间： 2024-08-25 15:03:11

ASPxTreeList及ASPxGridView使用的相关文章

DevExpress Asp.net ASPxTreeList的基本使用之一

DevExpress Asp.net ASPxTreeList的基本使用之一 目录(?)[+] 本文来自CSDN博客转载请标明出处httpblogcsdnnetwServicesarchive200907254378771aspx DevExpress Aspnet ASPxTreeList的基本使用之一 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/wServices/archive/2009/07/25/4378771.aspx DevExpress Asp

ASPXGridView使用小结

一.ASPXGridView外观显示 属性: Caption----列的标题( KeyFieldName----数据库字段 SEOFriendly 是否启用搜索引擎优化 Summary 指定分页汇总信息的格式 Setting节点的ShowFilterRow=True设置快速查找功能 SettingsBehavior.AllowFocusedRow=true 高亮选中的行,即选中行变色 SettingsBehavior.AllDragDrop=false禁止拖动标题列头 SettingsBehav

aspxgridview CustomButtonCallback 不支持弹出消息提示解决方法

protected void ASPxGridView1_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) { ASPxGridView view = sender as ASPxGridView; if (e.ButtonID == "btnAudit") { int id = 0; int.TryParse(view.GetRowValues(e.VisibleIndex

DevExpress ASP.NET 使用经验谈（6）-ASPxGridView通过属性配置界面展现

上一节中,我们通过简单的配置,通过ASPxGridView控件的使用,完成了对数据库表的CRUD操作. 这样的界面展现,功能是达到了,但是操作体验上,还是有所欠缺的. 图一 默认生成的列表界面 图二 默认编辑界面 接下来,我们通过以下几步简单的设置,使界面操作更美观,更符合实际需求. 第一步,我们将显示为文字操作的Edit,New,Delete修改为图片,通过属性 ButtonType="Image" 来实现. <dx:GridViewCommandColumn VisibleI

ASPxGridView的几个使用方法

一.ASPXGridView外观显示属性:Caption----列的标题(KeyFieldName----数据库字段SEOFriendly 是否启用搜索引擎优化Summary 指定分页汇总信息的格式 Setting节点的ShowFilterRow=True设置快速查找功能 SettingsBehavior.AllowFocusedRow=true 高亮选中的行,即选中行变色SettingsBehavior.AllDragDrop=false禁止拖动标题列头SettingsBehavior.All

AspxGridView使用手记

AspxGridView使用手记 一.  基本使用方法  4 1.导入Dll文件   4 2.Asp.Net页面控件注册 4 3. Asp.Net页面控件声明    5 4.删除licenses.licx协议文件(盗版)   5 5.功能概述  5 二.  绑定数据(单层)    5 1.使用DataSource属性绑定DataTable 5 2.使用DataSourceID属性绑定SqlDataSource   6 3.使用DataSourceID属性绑定ObjectDataSource   

ASPxGridview使用总结

我的ASPxGridview使用总结 一.ASPXGridView外观显示属性: Caption----列的标题( KeyFieldName----数据库字段 SEOFriendly 是否启用搜索引擎优化Summary 指定分页汇总信息的格式 Setting节点的ShowFilterRow=True设置快速查找功能 SettingsBehavior.AllowFocusedRow=true 高亮选中的行,即选中行变色SettingsBehavior.AllDragDrop=false禁止拖动标题

为AspxGridView绑定嵌套数据

创建时间:2011年11月07日 16:46  阅读次数:(4619) 分享到:4 上一节下一节 在AspxGridView中允许绑定嵌套数据.也就是一条数据允许再绑定该数据的下级数据.举个很简单的例子,我们用AspxGridView来显示中国所有省份,然后我们可以为每行数据(每个省)再绑定一个下级数据,也就是每个省对应的所有市的信息,以此类推,我们还可以为每个市再绑定所有县的信息,层层级推.具体展示在页面上就是AspxGridView上的每条数据前面都有一个+号,展开+号,就可以看到下级数据了

AspxGridView导出excel、pdf

AspxGridView导出excel.pdf ASPxGridViewExporter用于ASPxGridView的数据导出,导出的格式有csv,pdf,rtf,xls,使用非常简单,只用一个函数就可以完成数据的导出. 关于ASPxGridView的数据绑定就不用多说了,主要介绍一下数据导出 1.拖放一个ASPxGridViewExporter,ID设置为你要导出的AspxGridView的ID 2.拖放一个按钮,实现按钮的方法就一句话 public void ToExcel(object s