最近实在是太忙了，好几个月没有更新博客了，近来项目需要用到GRIDVIEW嵌套的，在这里跟大家分享一下，大家如有更好的解决方案，请不吝贴出。在ASP.NET中，GridView嵌套可以显示当前选定的父记录同时显示其子记录。例如，你可以创建按条件查找出相应项目的管理项目列表，同时可展开项目查看目前该项目进展到哪一阶段了。（如下图）
而这一使用的基本技术就是为父表创建一个GridView，它的每行又嵌入一个GridView，这些子GridView使用TemplateField来插入到父GridView中。唯一需要注意的是，不能在绑定父GridView的同时绑定子GridView，因为此时父行还没有被创建。而子GridView需要等待父GridView的DataBound时间发生。
在这个示例中父GridView定义了自动产生列( AutoGenerateColumns="True")，我这里实际上使用了两个子GridView.
<asp:TemplateColumn HeaderText="OPHist">
<HeaderStyle Width="40px" CssClass="12-head-pt"></HeaderStyle>
<ItemTemplate>
<asp:Image ID="XXX" runat="server" ImageUrl="../image/plus.gif" AlternateText="ProjectHistory">
</asp:Image>
<asp:DataGrid ID="grdOPHistory" Style="left: 50px" runat="server" AutoGenerateColumns="True"
BorderColor="MintCream" BorderWidth="1px" BackColor="White" CellPadding="1" ForeColor="Black">
<SelectedItemStyle ForeColor="GhostWhite" BackColor="#CCCCCC"></SelectedItemStyle>
<HeaderStyle Font-Bold="True" Width="40px" ForeColor="White" BackColor="#ff6666"></HeaderStyle>
</asp:DataGrid>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Status">
<HeaderStyle Width="40px" CssClass="12-head-pt"></HeaderStyle>
<ItemTemplate>
<asp:Image ID="SHOW" runat="server" ImageUrl="../image/plus.gif" AlternateText="ProjectDetail">
</asp:Image>
<asp:DataGrid ID="grdProjectDetail1" onitemdatabound="grdProjectDetail1_ItemDataBound" Style="left: 50px" runat="server" AutoGenerateColumns="True">
<ItemStyle BackColor="#B3D7F1"></ItemStyle>
<HeaderStyle Font-Bold="True" Font-Size="10" Height="20px" ForeColor="black" CssClass="A"
BackColor="#4791C5"></HeaderStyle> </asp:DataGrid>
</ItemTemplate>
</asp:TemplateColumn>
这些GRIDVIEW都没有直接指定数据源。而是采用编程的形式来实现。下面贴出父GRIDVIEW的DataBound事件。
private void grdProject_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.DataItem is DataRowView)
{
string bindSql = @"EXEC SSM_SP_GETDTL @PROJECTNUM='" + ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim() + "', @REV='" + ((Label)e.Item.FindControl("REV")).Text.Trim() + "'";
base.doDataBind((DataGrid)e.Item.FindControl("grdProjectDetail1"), bindSql);
((DataGrid)e.Item.FindControl("grdProjectDetail1")).Style.Add("display", "none");
bindSql = @"EXEC SSM_SP_GETOPHIST @PROJECTNUM='" + ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim() + "', @REV='" + ((Label)e.Item.FindControl("REV")).Text.Trim() + "'";
base.doDataBind((DataGrid)e.Item.FindControl("grdOPHistory"), bindSql);
((DataGrid)e.Item.FindControl("grdOPHistory")).Style.Add("display", "none");
if (e.Item.FindControl("SHOW") != null)
{
((Image)e.Item.FindControl("SHOW")).Attributes.Add("onclick", "HierarGrid_toggleRow(this,'grdProjectDetail1')");
}
if (e.Item.FindControl("XXX") != null)
{
((Image)e.Item.FindControl("XXX")).Attributes.Add("onclick", "HierarGrid_toggleRow(this,'grdOPHistory')");
}
if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
{
string str2 = ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim();
string str3 = ((Label)e.Item.FindControl("REV")).Text.Trim();
ImageButton image = (ImageButton)e.Item.FindControl("btnEdit");
image.Attributes.Add("onclick", "window.open('SSMProjectDetail.aspx?PROJECTNUM=" + str2 + "&REV=" + str3 + "&Mode=Edit','_blank','top=10,left=10,width=1100,height=900,scrollbars=yes,resizable=yes')"); }
}
}
其实说白了也不难，但说不难也不容易。关键是前台面的HierarGrid_toggleRow怎么写。现将代码帖出，有不明白的地方请留言，如对您有帮助，请给个赞。
function HierarGrid_toggleRow(sender, grd) {
if (sender == null)
return;
var state = 1;
//if the hidden row has not already been generated, clone the panel into a new row
var existingRow = window.document.getElementById(sender.id + "showRow");
if (existingRow == null) {
//getting a reference to the table
var table = GetParentElementByTagName(sender, "TABLE");
var index = GetParentElementByTagName(sender, "TR").sectionRowIndex + 1;
//concatenate name of hidden panel => replace "Icon" from sender.id with "Panel"\n
if (grd == "grdProjectDetail1") {
rowDivName = HierarGrid_ReplaceStr(sender.id, "SHOW", grd);
}
else {
rowDivName = HierarGrid_ReplaceStr(sender.id, "XXX", grd);
}
var rowDiv = window.document.getElementById(rowDivName);
//adding new row to table
var newRow = table.insertRow(index);
newRow.id = sender.id + "showRow";
//adding new cell to row
var newTD = document.createElement("TD");
if (table.rows[0].cells[0].colSpan > 1)
newTD.colSpan = table.rows[0].cells[0].colSpan;
else
newTD.colSpan = table.rows[0].cells.length;
var myTD = newRow.appendChild(newTD);
//clone Panel into new cell
var copy = rowDiv;
copy.style.display = "";
myTD.innerHTML = copy.outerHTML;
rowDiv.parentNode.removeChild(rowDiv);
sender.src = HierarGrid_ReplaceStr(sender.src, "plus", "minus");
state = 1;
}
else {
if (existingRow.style.display == "none") {
existingRow.style.display = "";
sender.src = HierarGrid_ReplaceStr(sender.src, "plus", "minus");
state = 1;
}
else {
existingRow.style.display = "none";
sender.src = HierarGrid_ReplaceStr(sender.src, "minus", "plus");
state = 0;
}
}
// ChangeRowState(sender, state);
}
function HierarGrid_ReplaceStr(orgString, findString, replString) {
pos = orgString.lastIndexOf(findString);
return orgString.substr(0, pos) + replString + orgString.substr(pos + findString.length);
}
function GetParentElementByTagName(element, tagName) {
var element = element;
while (element.tagName != tagName)
element = element.parentNode;
return element;
}