ASPxGridView之Master-Detail 参考页面官方demo:
http://demos.devexpress.com/ASPxGridViewDemos/MasterDetail/MasterDetail.aspx
Master-Detail能够使主表与子表的信息在同一页面展示,无须新建子表页面。
一直用一个grid,点击每行的详细按钮或链接,转到子表页面。今天尝试使用ASPxGridView中的Master-Detail完成了一个列表页面,下面是我的制作步骤及其经验总结:
1、在aspx页面上拖放2个控件。aspxgridview和ObjectDataSource,分别命名为grid和objSaleUser
2、为 ObjectDataSource添加数据源。
3、设置 grid的数据源为objSaleUser,设置KeyFieldName和AutoGenerateColumns="False",添加你想显示的列。
设置SettingsDetail下的 ShowDetailRow="True"
4、 为grid编辑模板,选择DetailRow,光标定位于DetailRow,拖放一个aspxgridview进去,命名为detailGrid。
5、为detailGrid拖放一个ObjectDataSource到页面中,重命名为ObjSaleUserWeeklyReports
配置数据源和定义参数,因GetFinishedWeeklyReports中有一个实参saleUserID,所以在定义参数中为其设置一个 session。
6、设置detailGrid的数据源为ObjSaleUserWeeklyReports,设置KeyFieldName和 AutoGenerateColumns="False",添加你想显示的列。设置SettingsDetail下的IsDetailGrid="true"
7、给detailGrid添加事件BeforePerformDataSelect,查看帮助文档知Occurs before the ASPxGridView control obtains data from a data source. When implementing a master-detail mode, the BeforePerformDataSelect
event should be handled to specify session values.在后台文件cs中为Session["saleUserID"]赋值。Session["saleUserID"] = (sender as ASPxGridView).GetMasterRowKeyValue();
8、前后台代码如下:
%@PageLanguage="C#"AutoEventWireup="true"CodeFile="SaleUserListReport.aspx.cs"
Inherits="Report_SaleUserListReport"%
!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
%@RegisterAssembly="DevExpress.Web.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxPager"TagPrefix="dxpg"%
%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%
%@RegisterAssembly="System.Web.Extensions,Version=1.0.61025.0,Culture=neutral,PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI"TagPrefix="asp"%
%@RegisterAssembly="DevExpress.Web.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxTabControl"TagPrefix="dxtc"%
%@RegisterAssembly="DevExpress.Web.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxClasses"TagPrefix="dxw"%
%@RegisterAssembly="DevExpress.Web.ASPxGridView.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxGridView"TagPrefix="dxwgv"%
%@RegisterAssembly="DevExpress.Web.ASPxEditors.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxEditors"TagPrefix="dxe"%
htmlxmlns="http://www.w3.org/1999/xhtml"
headrunat="server"
title无标题页/title
/head
body
formid="form1"runat="server"
dxtc:ASPxPageControlID="ASPxPageControl1"runat="server"ActiveTabIndex="0"AutoPostBack="True"
Width="99%"Height="590px"
ActiveTabStyleBackColor="Transparent"
/ActiveTabStyle
ContentStyleBackColor="Transparent"
BorderBorderColor="#002D96"BorderStyle="Solid"BorderWidth="1px"/Border
/ContentStyle
PaddingsPadding="0px"/Paddings
LoadingPanelStyleImageSpacing="6px"BackColor="Transparent"
/LoadingPanelStyle
TabPages
dxtc:TabPageText="销售人员周报"
ContentCollection
dxw:contentcontrolrunat="server"
table
tr
tdstyle="width:256px"
dxwgv:ASPxGridViewID="grid"runat="server"AutoGenerateColumns="False"DataSourceID="objSaleUser"
KeyFieldName="U_ID"ClientInstanceName="grid"Width="800px"
SettingsTextEmptyDataRow="没有数据"/SettingsText
SettingsLoadingPanelText="正在加载..."/SettingsLoadingPanel
Styles
HeaderImageSpacing="5px"SortingImageSpacing="5px"HorizontalAlign="Center"
/Header
LoadingPanelImageSpacing="10px"
/LoadingPanel
AlternatingRowEnabled="True"/
/Styles
Columns
dxwgv:GridViewDataTextColumnFieldName="PI_NAME"VisibleIndex="0"Caption="姓名"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_CODE"VisibleIndex="1"Caption="编码"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_TELNUM"VisibleIndex="2"Caption="公司电话"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_EMAIL"VisibleIndex="3"Caption="公司邮箱"
Width="150px"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_MOBILEPHONE"VisibleIndex="4"Caption="个人电话"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_GTALK"VisibleIndex="5"Caption="GTalk"
Width="150px"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
/Columns
SettingsDetailAllowOnlyOneMasterRowExpanded="True"ShowDetailRow="True"/
Templates
DetailRow
销售经理:b
%#Eval("U_NAME")%
/b,最近一个月的周报
br/
br/
dxwgv:ASPxGridViewID="detailGrid"runat="server"Width="750px"AutoGenerateColumns="False"
ClientInstanceName="detailGrid"KeyFieldName="SWI_ID"DataSourceID="ObjSaleUserWeeklyReports"
OnBeforePerformDataSelect="detailGrid_DataSelect"
SettingsTextEmptyDataRow="没有数据"/SettingsText
SettingsLoadingPanelText="正在加载..."/SettingsLoadingPanel
Styles
HeaderImageSpacing="5px"SortingImageSpacing="5px"HorizontalAlign="Center"
/Header
LoadingPanelImageSpacing="10px"
/LoadingPanel
AlternatingRowEnabled="True"/
/Styles
SettingsBehaviorAllowFocusedRow="True"AllowGroup="False"AllowSort="False"/
Columns
dxwgv:GridViewDataTextColumnFieldName="SWI_ITEM1"Width="150px"Caption="星期(日期)"
VisibleIndex="0"
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="SWI_ITEM2"Width="450px"Caption="当天主要工作内容和拜访用户情况"VisibleIndex="1"
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="SWI_ITEM3"Width="150px"Caption="已取得的阶段性成果"VisibleIndex="2"
/dxwgv:GridViewDataTextColumn
/Columns
SettingsDetailIsDetailGrid="true"/
SettingsBehaviorColumnResizeMode="Control"AllowFocusedRow="True"AllowGroup="False"
AllowSort="False"/
SettingsPagerAlwaysShowPager="True"PageSize="10"
AllButtonVisible="True"
/AllButton
SummaryAllPagesText="分页{0}-{1}(总{2}条)"Text="当前第{0}页,一共{1}页(总{2}条)"/
/SettingsPager
/dxwgv:ASPxGridView
/DetailRow
/Templates
SettingsBehaviorColumnResizeMode="Control"AllowFocusedRow="True"AllowGroup="False"
AllowSort="False"/
SettingsPagerAlwaysShowPager="True"PageSize="15"
AllButtonVisible="True"
/AllButton
SummaryAllPagesText="分页{0}-{1}(总{2}条)"Text="当前第{0}页,一共{1}页(总{2}条)"/
/SettingsPager
/dxwgv:ASPxGridView
/td
/tr
/table
/dxw:contentcontrol
/ContentCollection
/dxtc:TabPage
/TabPages
/dxtc:ASPxPageControl
asp:ObjectDataSourceID="objSaleUser"runat="server"SelectMethod="GetSaleUserList"
TypeName="DHC.EAS.Bo.BoWeekReportSummarize"/asp:ObjectDataSource
asp:ObjectDataSourceID="ObjSaleUserWeeklyReports"runat="server"SelectMethod="GetFinishedWeeklyReports"
TypeName="DHC.EAS.Bo.BoWeekReportSummarize"
SelectParameters
asp:SessionParameterName="saleUserID"SessionField="saleUserID"Type="Object"/
/SelectParameters
/asp:ObjectDataSource
/form
/body
/html
代码 usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingDevExpress.Web.ASPxGridView;
publicpartialclassReport_SaleUserListReport:PageBase
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
grid.DataBind();
//grid.DetailRows.ExpandRow(0);
}
}
protectedvoiddetailGrid_DataSelect(objectsender,EventArgse)
{
Session["saleUserID"]=(senderasASPxGridView).GetMasterRowKeyValue();
}
}
http://demos.devexpress.com/ASPxGridViewDemos/MasterDetail/MasterDetail.aspx
Master-Detail能够使主表与子表的信息在同一页面展示,无须新建子表页面。
一直用一个grid,点击每行的详细按钮或链接,转到子表页面。今天尝试使用ASPxGridView中的Master-Detail完成了一个列表页面,下面是我的制作步骤及其经验总结:
1、在aspx页面上拖放2个控件。aspxgridview和ObjectDataSource,分别命名为grid和objSaleUser
2、为 ObjectDataSource添加数据源。
3、设置 grid的数据源为objSaleUser,设置KeyFieldName和AutoGenerateColumns="False",添加你想显示的列。
设置SettingsDetail下的 ShowDetailRow="True"
![](https://i-blog.csdnimg.cn/blog_migrate/c99e4a6597ae3f2c81920495bb575c00.jpeg)
4、 为grid编辑模板,选择DetailRow,光标定位于DetailRow,拖放一个aspxgridview进去,命名为detailGrid。
![](https://i-blog.csdnimg.cn/blog_migrate/bfd2d06f992d264d49905ab3b32eb85c.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/81398ea1544316d65aa38155d888e245.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/187b83210e6ca4cb5a1df2f980549cd4.jpeg)
5、为detailGrid拖放一个ObjectDataSource到页面中,重命名为ObjSaleUserWeeklyReports
配置数据源和定义参数,因GetFinishedWeeklyReports中有一个实参saleUserID,所以在定义参数中为其设置一个 session。
![](https://i-blog.csdnimg.cn/blog_migrate/814779de1409bbad26ac5d457d5e6a5f.jpeg)
6、设置detailGrid的数据源为ObjSaleUserWeeklyReports,设置KeyFieldName和 AutoGenerateColumns="False",添加你想显示的列。设置SettingsDetail下的IsDetailGrid="true"
![](https://i-blog.csdnimg.cn/blog_migrate/41d47ef96a399c8acda4303286a61f96.jpeg)
7、给detailGrid添加事件BeforePerformDataSelect,查看帮助文档知Occurs before the ASPxGridView control obtains data from a data source. When implementing a master-detail mode, the BeforePerformDataSelect
event should be handled to specify session values.在后台文件cs中为Session["saleUserID"]赋值。Session["saleUserID"] = (sender as ASPxGridView).GetMasterRowKeyValue();
8、前后台代码如下:
%@PageLanguage="C#"AutoEventWireup="true"CodeFile="SaleUserListReport.aspx.cs"
Inherits="Report_SaleUserListReport"%
!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
%@RegisterAssembly="DevExpress.Web.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxPager"TagPrefix="dxpg"%
%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%
%@RegisterAssembly="System.Web.Extensions,Version=1.0.61025.0,Culture=neutral,PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI"TagPrefix="asp"%
%@RegisterAssembly="DevExpress.Web.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxTabControl"TagPrefix="dxtc"%
%@RegisterAssembly="DevExpress.Web.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxClasses"TagPrefix="dxw"%
%@RegisterAssembly="DevExpress.Web.ASPxGridView.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxGridView"TagPrefix="dxwgv"%
%@RegisterAssembly="DevExpress.Web.ASPxEditors.v8.1,Version=8.1.3.0,Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxEditors"TagPrefix="dxe"%
htmlxmlns="http://www.w3.org/1999/xhtml"
headrunat="server"
title无标题页/title
/head
body
formid="form1"runat="server"
dxtc:ASPxPageControlID="ASPxPageControl1"runat="server"ActiveTabIndex="0"AutoPostBack="True"
Width="99%"Height="590px"
ActiveTabStyleBackColor="Transparent"
/ActiveTabStyle
ContentStyleBackColor="Transparent"
BorderBorderColor="#002D96"BorderStyle="Solid"BorderWidth="1px"/Border
/ContentStyle
PaddingsPadding="0px"/Paddings
LoadingPanelStyleImageSpacing="6px"BackColor="Transparent"
/LoadingPanelStyle
TabPages
dxtc:TabPageText="销售人员周报"
ContentCollection
dxw:contentcontrolrunat="server"
table
tr
tdstyle="width:256px"
dxwgv:ASPxGridViewID="grid"runat="server"AutoGenerateColumns="False"DataSourceID="objSaleUser"
KeyFieldName="U_ID"ClientInstanceName="grid"Width="800px"
SettingsTextEmptyDataRow="没有数据"/SettingsText
SettingsLoadingPanelText="正在加载..."/SettingsLoadingPanel
Styles
HeaderImageSpacing="5px"SortingImageSpacing="5px"HorizontalAlign="Center"
/Header
LoadingPanelImageSpacing="10px"
/LoadingPanel
AlternatingRowEnabled="True"/
/Styles
Columns
dxwgv:GridViewDataTextColumnFieldName="PI_NAME"VisibleIndex="0"Caption="姓名"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_CODE"VisibleIndex="1"Caption="编码"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_TELNUM"VisibleIndex="2"Caption="公司电话"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_EMAIL"VisibleIndex="3"Caption="公司邮箱"
Width="150px"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_MOBILEPHONE"VisibleIndex="4"Caption="个人电话"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="PI_GTALK"VisibleIndex="5"Caption="GTalk"
Width="150px"
CellStyleHorizontalAlign="Center"
/CellStyle
/dxwgv:GridViewDataTextColumn
/Columns
SettingsDetailAllowOnlyOneMasterRowExpanded="True"ShowDetailRow="True"/
Templates
DetailRow
销售经理:b
%#Eval("U_NAME")%
/b,最近一个月的周报
br/
br/
dxwgv:ASPxGridViewID="detailGrid"runat="server"Width="750px"AutoGenerateColumns="False"
ClientInstanceName="detailGrid"KeyFieldName="SWI_ID"DataSourceID="ObjSaleUserWeeklyReports"
OnBeforePerformDataSelect="detailGrid_DataSelect"
SettingsTextEmptyDataRow="没有数据"/SettingsText
SettingsLoadingPanelText="正在加载..."/SettingsLoadingPanel
Styles
HeaderImageSpacing="5px"SortingImageSpacing="5px"HorizontalAlign="Center"
/Header
LoadingPanelImageSpacing="10px"
/LoadingPanel
AlternatingRowEnabled="True"/
/Styles
SettingsBehaviorAllowFocusedRow="True"AllowGroup="False"AllowSort="False"/
Columns
dxwgv:GridViewDataTextColumnFieldName="SWI_ITEM1"Width="150px"Caption="星期(日期)"
VisibleIndex="0"
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="SWI_ITEM2"Width="450px"Caption="当天主要工作内容和拜访用户情况"VisibleIndex="1"
/dxwgv:GridViewDataTextColumn
dxwgv:GridViewDataTextColumnFieldName="SWI_ITEM3"Width="150px"Caption="已取得的阶段性成果"VisibleIndex="2"
/dxwgv:GridViewDataTextColumn
/Columns
SettingsDetailIsDetailGrid="true"/
SettingsBehaviorColumnResizeMode="Control"AllowFocusedRow="True"AllowGroup="False"
AllowSort="False"/
SettingsPagerAlwaysShowPager="True"PageSize="10"
AllButtonVisible="True"
/AllButton
SummaryAllPagesText="分页{0}-{1}(总{2}条)"Text="当前第{0}页,一共{1}页(总{2}条)"/
/SettingsPager
/dxwgv:ASPxGridView
/DetailRow
/Templates
SettingsBehaviorColumnResizeMode="Control"AllowFocusedRow="True"AllowGroup="False"
AllowSort="False"/
SettingsPagerAlwaysShowPager="True"PageSize="15"
AllButtonVisible="True"
/AllButton
SummaryAllPagesText="分页{0}-{1}(总{2}条)"Text="当前第{0}页,一共{1}页(总{2}条)"/
/SettingsPager
/dxwgv:ASPxGridView
/td
/tr
/table
/dxw:contentcontrol
/ContentCollection
/dxtc:TabPage
/TabPages
/dxtc:ASPxPageControl
asp:ObjectDataSourceID="objSaleUser"runat="server"SelectMethod="GetSaleUserList"
TypeName="DHC.EAS.Bo.BoWeekReportSummarize"/asp:ObjectDataSource
asp:ObjectDataSourceID="ObjSaleUserWeeklyReports"runat="server"SelectMethod="GetFinishedWeeklyReports"
TypeName="DHC.EAS.Bo.BoWeekReportSummarize"
SelectParameters
asp:SessionParameterName="saleUserID"SessionField="saleUserID"Type="Object"/
/SelectParameters
/asp:ObjectDataSource
/form
/body
/html
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingDevExpress.Web.ASPxGridView;
publicpartialclassReport_SaleUserListReport:PageBase
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
grid.DataBind();
//grid.DetailRows.ExpandRow(0);
}
}
protectedvoiddetailGrid_DataSelect(objectsender,EventArgse)
{
Session["saleUserID"]=(senderasASPxGridView).GetMasterRowKeyValue();
}
}