如何在响应式、引导式 DataGrid 中合并所有页脚单元格？

Question

我在 ASP.NET 用户控件中有一个多列 DataGrid，它带有一个页脚，我想将其列合并为一个单元格。我怎么做？我正在使用 C# 作为代码隐藏，Bootstrap 4 beta 类在视口宽度变化时自动隐藏列，某些 symbols/icons 的 Font-Awesome，下面是里面的 DataGrid我的 ASCX 标记。目前一切正常，只是我希望将页脚行全部合并为一个单元格。最后，我第一列的 FooterTemplate 中的项目应该分布在成功合并的页脚单元格中，因为我已经为此准备了样式（我假设所有其他空的页脚单元格都将合并到第一个页脚中单元格，第一个页脚单元格的内容将被保留）。

<div class="col-lg-12 ">  
    <div class="table-responsive"> 
        <asp:datagrid id="dgEggGradeDetails" UseAccessibleHeader="True" AutoGenerateColumns="False" CssClass="table table-striped table-bordered table-hover" ShowHeader="True" ShowFooter="True" runat="server" DataKeyField="EggID" CellPadding="0" GridLines="None" AllowSorting="True" OnSortCommand="dgEggGradeDetails_SortCommand" OnItemCreated="dgEggGradeDetails_ItemCreated">
            <FooterStyle CssClass="">
            </FooterStyle>
            <Columns>
                <asp:TemplateColumn HeaderText="Egg ID" SortExpression="EggID" HeaderStyle-CssClass="visible-xs visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-xs visible-sm visible-md visible-lg">
                    <ItemTemplate>
                        <asp:Label ID="lblEggID" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "EggID") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div id="dvHidePickledOrDeviled" runat="server">
                            <div style="text-align: left; float: left; width: 80%; height: 100%;">
                                <asp:Label ID="lblHideFooter" runat="server" CssClass="" Visible="True">Hide All Eggs (Deviled, Pickled)</asp:Label>
                            </div>
                            <div style="text-align: right;">
                                <asp:LinkButton ID="btnHidePickledOrDeviled" runat="server" OnClick="ShowOrHidePickledOrDeviled" CssClass="" Visible="True" CommandName="HidePickledOrDeviled">
                                    <i id="iHidePickledOrDeviled" class="fa fa-minus-square-o" style="font-size: 40px;" title="Hide Eggs with 'Deviled' and 'Pickled' grades"></i>
                                </asp:LinkButton>       
                            </div>
                        </div>
                        <div id="dvShowPickledOrDeviled" runat="server">       
                            <div style="text-align: left; float: left; width: 80%; height: 100%;">
                                <asp:Label ID="lblShowFooter" runat="server" CssClass="" Visible="True">See All Eggs (Deviled, Pickled)</asp:Label>
                            </div>
                            <div style="text-align: right;">
                                <asp:LinkButton ID="btnShowPickledOrDeviled" runat="server" OnClick="ShowOrHidePickledOrDeviled" CssClass="" Visible="True" CommandName="ShowPickledOrDeviled">
                                    <i id="iShowPickledOrDeviled" class="fa fa-plus-square-o" style="font-size: 40px;" title="Show Eggs with 'Deviled' and 'Pickled' grades"></i>
                                </asp:LinkButton>
                            </div>                      
                        </div>
                    </FooterTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="Egg Name" SortExpression="EggName" HeaderStyle-CssClass="visible-md visible-lg" ItemStyle-CssClass="visible-md visible-lg">
                    <ItemTemplate>
                        <asp:Label  ID="lblEggName" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "EggName") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="Egg Grade" SortExpression="EggGrade" HeaderStyle-CssClass="visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-sm visible-md visible-lg">
                    <ItemTemplate>
                        <asp:Label ID="lblGrade" Runat="server" />
                        <asp:Label ID="lblGradeErrorMsg" Runat="server" />
                    </ItemTemplate>
                </asp:TemplateColumn>

                <asp:TemplateColumn HeaderText="Confirm Grade" SortExpression="Grade" HeaderStyle-CssClass="visible-xs visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-xs visible-sm visible-md visible-lg">
                    <ItemTemplate>
                        <asp:dropdownlist id="ddlConfirmGrade" Runat="server"></asp:dropdownlist>
                        <asp:Label ID="lblConfirmGrade" Runat="server" />
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:TemplateColumn>


                <asp:TemplateColumn HeaderText="Edible End Date" Visible="False" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
                    <ItemTemplate>
                        <asp:Label id="lblEdibleEndDate" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "EdibleEndDate2"))%>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="Egg Grade Sync Date" Visible="False" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
                    <ItemTemplate>
                        <asp:Label id="lblEggGradeUpdatedDate" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "EggGradeUpdatedDate") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:TemplateColumn>

                <asp:TemplateColumn HeaderText="Expiration" SortExpression="ExpirationStopDate" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
                    <ItemTemplate>
                        <asp:Label id="lblExpirationStopDate" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "ExpirationStopDate"))%>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:TemplateColumn>

                <asp:TemplateColumn HeaderText="Reason for Grade Change" SortExpression="GradeChangeDescription" HeaderStyle-CssClass="visible-xs visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-xs visible-sm visible-md visible-lg">
                    <ItemTemplate>
                        <asp:dropdownlist id="ddlGradeChangeReason" Runat="server"></asp:dropdownlist>                          
                        <asp:Label id="lblReasonErrorMsg" Font-Size="10px" Runat="server"></asp:Label><INPUT id=hiRegistrationID type=hidden value='<%# DataBinder.Eval(Container.DataItem, "RegistrationID") %>' name=hiRegistrationID Runat="server"></input>
                        <input id="hiCurrLetGrade" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "Grade") %>' name=hiCurrLetGrade Runat="server">
                        <input id="hiCurrLetGradeID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeID") %>' name=hiCurrLetGradeID Runat="server">
                        <input id="hiGradeEnteredDate" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeEnteredDate") %>' name="hiGradeEnteredDate" Runat="server" />
                        <input id="hiEggEmail" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "Email") %>' name="hiEggEmail" Runat="server" />
                        <input id="hiQualityStatusID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "CurrentQualityStatusID") %>' name="hiQualityStatusID" Runat="server" />
                        <input id="hiEggLaidDate" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "EggLaidDate") %>' name="hiEggLaidDate" Runat="server" />
                        <input id="hiStoreName" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "StoreName") %>' name="hiStoreName" Runat="server" />
                        <input id="hiTypeAEgg" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "TypeAEgg") %>' name="hiTypeAEgg" Runat="server" />
                        <input id="hiTypeBEgg" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "IsTypeBEgg") %>' name="hiTypeBEgg" Runat="server" />
                        <input id="hiEdibleTypeID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "EdibleTypeID") %>' name="hiEdibleTypeID" Runat="server" />
                        <input id="hiGradeChangeReasonID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeChangeReasonID") %>' name=hiGradeChangeReasonID Runat="server">
                        <input id="hiGradeChangeDescription" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeChangeDescription") %>' name=hiGradeChangeDescription Runat="server">
                        <asp:Label ID ="lblCurrLetGrade" EnableViewState ="True" Visible = "False" Runat = "server" Text = '<%# DataBinder.Eval(Container.DataItem, "Grade") %>'></asp:Label>
                        <asp:Label ID ="lblEggGrade" EnableViewState ="True" Visible = "False" Runat = "server" Text = '<%# DataBinder.Eval(Container.DataItem, "EggGrade") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>

                    </FooterTemplate>
                </asp:TemplateColumn>                        
            </Columns>
        </asp:datagrid>
    </div>
</div>

Answer 1

在代码隐藏的 ItemCreated 事件处理程序中，放置以下代码以合并整个页脚行：

protected void dgEggGradeDetails_ItemCreated(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Footer)
    {
        int newcolspan = 1;
        int totalColumns = e.Item.Cells.Count - 1; 

        for (int i = totalColumns; i >= 1; i--)
        {
            if (e.Item.Cells[i].Visible)
            {
                e.Item.Cells.RemoveAt(i);
                newcolspan++;
            }
        }

        e.Item.Cells[0].ColumnSpan = newcolspan;
    }
}

如何在响应式、引导式 DataGrid 中合并所有页脚单元格？

How to merge all footer cells in a responsive, bootstrapped DataGrid?

asp.net

datagrid

bootstrap-4

ascx