Gridview的展开

在MIS系统中经常用到查询出数据列表后,展开及收缩详细信息操作,下面介绍一种非常直观的异步展开方式,异步的展开方式同时也可以减轻系统压力:

步骤:

1.在你的aspx页面头部注册System.Web.Extensions

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

2.在form表单里加入ScriptManager

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

3.在GridView外嵌套一个UpdatePanel,并指定局部刷新Triggers属性值

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvDemand" runat="server" Width="100%" AutoGenerateColumns="False" DataKeyNames="ID" OnRowCommand="gvDemand_RowCommand">

/**此处为GridView里的内容...脚本有点多,页面全部html代码请点这里下载**/

此处要注意的地方就是展开部分ID的命名,默认为不显示

</GridView>

</ContentTemplate>
<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="gvDemand" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>

4.接下来编写服务器端代码gvDemand_RowCommand

代码

protected   void  gvDemand_RowCommand( object  sender, GridViewCommandEventArgs e)
        {
             string  rowIndex  =  e.CommandArgument.ToString();
             switch  (e.CommandName.ToLower())
            {
                 case   " showdetail " :  // 显示详细信息
                     int  index  =   0 ;
                     if  ( int .Parse(rowIndex)  %  pager.PageSize  ==   0 )
                    { index  =  pager.PageSize  -   1 ; }
                     else
                    { index  =  ( int .Parse(rowIndex)  %  pager.PageSize)  -   1 ; }
                    HtmlTableRow trShowDetail  =  (HtmlTableRow)gvDemand.Rows[index].FindControl( " trShowDetail " );
                     if  (trShowDetail  !=   null )
                    {
                         if  (trShowDetail.Visible  ==   false )
                        {
                            trShowDetail.Visible  =   true ;
                             // 流程控件处理
                            WorkFlow.UserControl.ActionToolBar flowBar  =  ((WorkFlow.UserControl.ActionToolBar)gvDemand.Rows[index].FindControl( " ActionToolBar1 " ));
                             if  (flowBar  !=   null )
                            {
                                flowBar.BindFlowData();
                            }
                        }
                         else
                        {
                            trShowDetail.Visible  =   false ;
                        }
                    }
                     break ;
                 default :
                     break ;
            }
        }

 5.效果图(点击单据编号即可异步展开下面的详细信息及流程审批信息,再次点击收缩):