WebGrid 寻呼机样式答案

【问题标题】：WebGrid pager stylingWebGrid 寻呼机样式
【发布时间】：2012-12-09 15:21:27
【问题描述】：

有没有办法将样式应用到 WebGrid Pager？

我发现这样做的唯一方法是从客户端编写 Jquery 代码，不过好像有点脏。

有什么正常的方法可以为这个 GridHelper 提供 css 吗？

【问题讨论】：

创建的寻呼机有一些与之一起创建的类，您可以使用这些类对其进行样式设置。
没有创建纯粹的类1
尝试使用jquery找到这些标签并用div包围它们

标签： asp.net asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 webgrid

【解决方案1】：

您可以像往常一样使用 CSS 来设置分页器中的链接样式。您只需要确保您可以通过 CSS 选择器识别链接。如果您将 Pager 调用放在可识别的元素中，这很容易：

<div id="pager">
    @grid.Pager()
</div>

现在您可以访问样式链接：

#pager a {
    color: pink;
    text-decoration: none;
}
#pager a:hover {
    color: green;
    text-decoration: underline;
}

【讨论】：

【解决方案2】：

使用 css 很简单。

将页脚样式设置为table-pager

@grid.GetHtml(
  mode: WebGridPagerModes.All,
  columns: gridColumns,
  tableStyle: "table table-striped table-condensed table-responsive table-hover",
  rowStyle: "table-row-clickable",
  footerStyle: "table-pager"
)

并添加这个 css：

.table-pager > td {
  padding-top: 10px;
}

  .table-pager > td > a {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 7px;
  }

  .table-pager > td > a:hover {
    background-color: #f0f0f0;
  }

【讨论】：