C#中的GridView 嵌套

当前位置：网学 > 编程文档 > C# > 正文

C#中的GridView 嵌套

作者：用户投稿来源：网络发布时间： 12/10/14

C#中的GridView 嵌套

前言：
    在Windows开发和Web开发中，经常需要使用父子网格控件，即用父子两个网格显示相关联的信息，点击父网格即在子网格中显示与之有关的信息。使用父子网格控件，既可以合理显示信息，又可以简化操作。下面笔者以一个显示物料和物料下每个包装的案例介绍父子网格控件的使用。

一、本案例需求
本案例是一个仓库物料盘点小模块。仓库中的物料按箱包装，每箱都有个唯一性的批号（相当于公民身份证）。开始时每箱的数量相同，但因车间使用，有些箱的数量会减少。

现在程序上需要实现：以网格显示仓库中的物料，每个物料的最后一列用以显示箱号链接，链接能够展开和隐藏物料下的批号。如果点击一个没展开批号的链接，即将链接所在行的物料箱号和数量显示在该行的下面。如果点击一个已经展开的链接，则将链接所在行的物料箱号隐藏。

二、程序设计要点
      实现这个功能比较简单，主要在于父子网格嵌套，子网格根据父网格的行进行数据查询，子网格的显示和隐藏。
      本程序开发语言用C#，网格控件用GridView，在asp.Net环境下实现，为了显示和隐藏子网格，还需要用到Javascript。下面分别对本程序的实现要点进行说明

1、父子网格控件的嵌套
要把子网格嵌套到父网格中，其实就相当于在父网格中指定一列，通过点击该列就能在子控件中显示或隐藏与该行有关的详细信息。

在父网格中显示的信息有三列，分别为品号、GRNLot(入库批次)、库存数量。另还需增加一列作为与子网格的链接。

2、子网格的数据查询
    当点击父网格中一行的链接时，即要展开子网格（假设子网格为隐藏），并在子网格中显示与点击行物料有关的箱号和数量。这里有连个因素：一是什么情况下触发该展开事件，二是父子网格怎么传递参数------以保证子网格中显示的箱号就是父网格中被点击行的物料下所有。

    对于第一个问题，GridView控件中有专门的事件 OnRowDataBound 来达到此目的，此事件在父网格中执行。
第二个问题，需要在父网格中指定关键字，用DataKeyNames参数，可以指定多个，中间以 , 隔开。

3、子网格的显示和隐藏
    父子网格显示的信息应以父网格为主，而子网格则作为参照性退居其次。因此，子网格应能方便的显示和隐藏，想要就显示，不想要就隐藏，以免影响主网格中信息的感染力。
    显示和隐藏子网格，本案例用的是 Javascript中的层(div)来实现的。将子网格放在一个 Div 中，且初始化为隐藏。

    父网格中的信息由很多条，则显示或隐藏的子网格应是与父网格中所点击的信息有关的。所以，包含子网格的Div 的名称应是动态的，而且应与父网格的DataKeyNames内容一致。

下面贴出详细代码(代码中省略了部分不重要内容)，并在代码中对关键点做解释说明：

父子网格嵌套和子网格的显示隐藏

<asp:GridView ID="ProdGrid" OnPageIndexChanging="ProdGrid_PageIndexChanging" OnRowDataBound="ProdGrid_RowDataBound" DataKeyNames="GRNLot" runat="server">
<!-说明：上面代码（下同）OnRowDataBound事件是父子网格控件的关键，用于点击父网格时绑定子网格的数据源），这是每个父子网格都不能少的。而DataKeyNames参数则是子网格绑定数据源的依据，即子网格根据父网格该行的GRNLot读取数据。!->
<Columns>
<!-父网格固定列-!>
<asp:BoundField DataField="ProductNM" HeaderText="品号" ReadOnly="true"/>
<asp:BoundField DataField="GRNLot" HeaderText="GRNLot" ReadOnly="true"/>
<asp:BoundField DataField="ProdQty" HeaderText="数量" ReadOnly="true"/>
<!-父网格固定列完成-!>

<!-将子网格作为父网格的一列-!>
<asp:TemplateField HeaderText="详细批号">
<ItemTemplate>
<!-显示/隐藏子网格的链接-!>
<div style="width: 100%;“>
<span style="float: right;color: Red; cursor: pointer" onclick="ShowHidden(''<%#Eval("GRNLot") %>'',event)">显示
<!-说明：上面代码重点在于 ShowHidden(''<%#Eval("GRNLot") %>'',event)，其中 <%#Eval(“GRNLot”) %>为动态获取所点击的层名称-!>
</span>
</div>
<!-显示/隐藏子网格的链接完成-!>
<!-将子网格放在一个层中，以执行Javascript的 ShowHidden事件-!>
<div style="display:none;" id="div<%#Eval("GRNLot") %>">
<!-说明：该层中的 display:none;即指定该层初始化为隐藏。id="div<%#Eval("GRNLot") %>"则为层的名称，且是根据父网格所点击行的 GRNLot 列动态指定!->
<asp:GridView ID="LotGrid" runat="server">
<Columns>
<asp:BoundField DataField="LotNM" HeaderText="批号" ReadOnly="true"/>
<asp:BoundField DataField="Qty" HeaderText="数量" ReadOnly="true"/>
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
<!-子网格设置完成-!>

</Columns>
</asp:GridView>
子网格的显示和隐藏事件

<script type="text/javascript">
function ShowHidden(sid,ev)
{<!-说明：sid 即为所父网格中所点击行而相关的层-!>
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var oDiv = document.getElementById("div" + sid);
oDiv.style.display = oDiv.style.display == "none"?"block":"none";<!-显示或隐藏指定的层-!>
target.innerHTML = oDiv.style.display == "none"?"显示":"隐藏";<!-根据显示或隐藏动作而的提示-!>
}
</script>

上面代码放在 aspx 文件的 <head>与</head>之间即可。

子网格数据绑定（点击父网格时触发）

protected void ProdGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView LotGrid = (GridView)e.Row.FindControl("LotGrid");<!-寻找名称为LotGrid的子网格并赋值给 LotGrid 的 GridView 对象-!>
if (LotGrid != null)
{
string strGRNLot = ProdGrid.DataKeys[e.Row.RowIndex][0].ToString();<!-获取父网格所点击行的的 DataKeyNames 参数，本案例只指定了 GRNLot。-!>
Session["strSqlC"] = "select * from WMS_CellCheckLot where GRNLot =''" + strGRNLot + "'' and UserCodeNM=''" + Session["Cell"].ToString() + "''";
Modules shareDispose = new Modules();
<!-根据查询语句获取 DataSet 类型的值 -!>
DataSet ds = shareDispose.getGridData(Session["strSqlC"].ToString());
LotGrid.DataSource = ds.Tables[0].DefaultView;<!-指定数据源-!>
LotGrid.DataBind();<!-绑定数据源-!>
}
}
}

下面是运行效果图