gridview展開嵌套顯示

最近實(shí)在是太忙了，好幾個(gè)月沒(méi)有更新博客了，近來(lái)項(xiàng)目需要用到GRIDVIEW嵌套的，在這里跟大家分享一下，大家如有更好的解決方案，請(qǐng)不吝貼出。在asp.net中，GridView嵌套可以顯示當(dāng)前選定的父記錄同時(shí)顯示其子記錄。例如，你可以創(chuàng)建按條件查找出相應(yīng)項(xiàng)目的管理項(xiàng)目列表，同時(shí)可展開項(xiàng)目查看目前該項(xiàng)目進(jìn)展到哪一階段了。（如下圖）

而這一使用的基本技術(shù)就是為父表創(chuàng)建一個(gè)GridView，它的每行又嵌入一個(gè)GridView，這些子GridView使用TemplateField來(lái)插入到父GridView中。唯一需要注意的是，不能在綁定父GridView的同時(shí)綁定子GridView，因?yàn)榇藭r(shí)父行還沒(méi)有被創(chuàng)建。而子GridView需要等待父GridView的DataBound時(shí)間發(fā)生。在這個(gè)示例中父GridView定義了自動(dòng)產(chǎn)生列(AutoGenerateColumns="True")，我這里實(shí)際上使用了兩個(gè)子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="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都沒(méi)有直接指定數(shù)據(jù)源。而是采用編程的形式來(lái)實(shí)現(xiàn)。下面貼出父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')");                                   }            }        }

其實(shí)說(shuō)白了也不難，但說(shuō)不難也不容易。關(guān)鍵是前臺(tái)面的HierarGrid_toggleRow怎么寫。現(xiàn)將代碼帖出，有不明白的地方請(qǐng)留言，如對(duì)您有幫助，請(qǐng)給個(gè)贊。

        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.parentN