WebGrid寻呼机样式

时间:2012-12-09 15:21:27

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

有没有办法将样式应用于WebGrid寻呼机?

我发现这样做的唯一方法是从客户端编写Jquery代码, 但它似乎有点脏。

有没有正常的方法为这个GridHelper提供css?

2 个答案:

答案 0 :(得分:7)

您可以正常使用CSS来设置寻呼机中的样式链接。您只需确保可以通过CSS选择器识别链接。如果您将Pager调用放入可识别的元素中,这很容易:

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

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

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

答案 1 :(得分:2)

使用css很简单。 enter image description here

将页脚样式设置为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;
  }