使用 Bootstrap 格式化 GridView 控件的标题

Question

我已经尝试了此处提供的其他解决方案，用于使用 Bootstrap 格式化 ASP.NET GridView 控件的标题，但我仍然无法使其正常工作。我试图确保每列的标题文本居中，尽管我尽了最大努力，但它并没有发生。我还需要斑马条纹来交替行，但这也不起作用，尽管悬停在行上有效。最后，选中行时应该触发的代码不会触发，尽管没有编译错误，所以我没有得到它。

这是 GridView 的 HTML：

        <div class="row">
            <asp:GridView ID="gvPlans" runat="server" AllowPaging="true" AllowSorting="true"
                PageSize="10" DataKeyNames="PlanID" AutoGenerateColumns="false"
                CssClass="table table-striped " DataSourceID="objPlans"
                OnPreRender="gvPlans_PreRender" OnSelectedIndexChanged="gvPlans_SelectedIndexChanged">
                <Columns>
                    <asp:BoundField DataField="PlanTitle" HeaderText="Title" ItemStyle-Width="55%"  
                        ItemStyle-HorizontalAlign="Left" />
                    <asp:BoundField DataField="BasePrice" HeaderText="Price"
                        ItemStyle-Width="15%" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="Right" />
                    <asp:BoundField DataField="MonthlyFee" HeaderText="Fee" 
                        ItemStyle-Width="15%" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="Right" />
                    <asp:BoundField DataField="TotalPrice" HeaderText="Total"  
                        ItemStyle-Width="15%" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="Right" />
                </Columns>
            </asp:GridView>
        </div>

根据其他几篇帖子的建议，我添加了一个 PreRender 事件，应该解决这个问题。选择行时也有一个事件捕获。这是代码：

    protected void gvPlans_PreRender(object sender, EventArgs e)
{
    try
    {
        gvPlans.UseAccessibleHeader = true;
        gvPlans.HeaderRow.TableSection = TableRowSection.TableHeader;
        gvPlans.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
    }
    catch 
    { }
}


protected void gvPlans_SelectedIndexChanged(object sender, EventArgs e)
{
    GridViewRow row = gvPlans.SelectedRow;

    planID = Convert.ToInt32(gvPlans.SelectedDataKey.Value);
    Plan plan = PlanDB.Get(planID);
}

我在每个数据列声明中添加了代码以将标题列设置为居中，但它也不起作用。使用上面的代码，这就是我得到的：

我会注意到，列本身的格式可以正常工作，数字列的右对齐就是证明。

总而言之，我无法让斑马条纹或标题列对齐工作，并且“SelectedIndexChanged”事件不会触发。如果明白为什么会如此痛苦，我会很危险！任何帮助将不胜感激。

Answer 1

如果您说标题文本未在中心位置对齐，我认为这很可能意味着您的标题样式被其他一些 CSS 样式覆盖。

如果我没记错的话，在 Bootstrap 中，它默认将 tr 元素向左对齐，并遵循 CSS 规则。

th {text-align: left;}

因此您需要自己覆盖它并将text-align 设置为居中。

GridView 确实提供了一种设置斑马条纹样式的方法，在它自己的术语中称为交替行样式。

您可以尝试像这样配置您的 GridView 控件

<asp:GridView ID="gvPlans" runat="server" AllowPaging="true" AllowSorting="true"PageSize="10" DataKeyNames="PlanID" AutoGenerateColumns="false" CssClass="table table-striped " DataSourceID="objPlans" OnPreRender="gvPlans_PreRender" OnSelectedIndexChanged="gvPlans_SelectedIndexChanged">
    <RowStyle CssClass="MyRowStyle" />
    <AlternatingRowStyle CssClass="MyAltRowStyle" />
                ...
            </asp:GridView>

然后你可以在这些 CSS 类中定义你的规则，比如

.MyRowStyle{background-color:#fff;}
.MyAltRowStyle{background-color:#999;}

SelectedIndexChanged 事件在一行的选择按钮被触发时引发 单击，但在 GridView 控件处理选择操作之后。 这使您能够提供一个事件处理方法来执行 自定义例程，例如使用当前更新状态标签 选定的行，无论何时发生此事件。

因此，在您的情况下，您可以自己在标记代码中添加缺少的选择按钮，也可以启用 GridView 为您添加它。

<asp:ButtonField Text="Select" CommandName="Select" />
// or 
Set AutoGenerateSelectButton="True" in the GridView

Answer 2

将此添加到您的 .css 文件中：

#gvPlans th {
       align: center;
} 

您覆盖了 Bootstrap 提供的 '.th' 类的默认样式。