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);
}

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

我会注意到列本身的格式设置正常，正如数字列的右对齐所证明的那样。

总而言之，我无法使斑马条纹或标题列对齐起作用，并且＆＃34; SelectedIndexChanged＆＃34;事件没有发生。如果理解为什么会这么痛苦，我会感到危险！任何帮助将不胜感激。

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控件处理选择操作后。这使您可以提供执行a的事件处理方法自定义例程，例如使用当前更新状态标签每当发生此事件时，选定的行。

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

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

Answer 2

将此添加到.css文件中：

#gvPlans th {
       align: center;
}

您将覆盖Bootstrap提供的“.th”类的默认样式。

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

2 个答案: