jquery - WebGrid 页脚获取当前页面的样式

Question

我正在尝试使用 Razor 使 WebGrid View 正常工作，到目前为止，我已经设法设置了除页脚的分页图标之外的大部分样式。

我搜索了很多地方以了解如何修改页脚的当前选定页面(文本)但无济于事。

似乎页脚会为当前未使用 a 标签选择的任何页面生成标签，但不会为当前页面生成任何内容。

我正在尝试让每个分页按钮周围都有一个边框，这就是它目前的样子:

(我不能在这里发布图片所以链接到 imgur)

http://imgur.com/a/EPU3M (下图)

我已经修改了除当前选定页面之外的所有元素 - 我还希望有一个边框并更改其颜色(以便它看起来与其他页面不同)。

查看开发工具，我发现 html 看起来像这样:

(来自上一个链接的顶部图片)

似乎有一篇文章显示这是使用正则表达式完成的，但有人评论说应该使用 webgrid 本身来完成。

该文章位于以下链接中:

http://weblogs.asp.net/imranbaloch/highlighting-the-current-page-of-webgrid

有没有办法获取当前页面 - 无论是使用 jQuery 还是 WebGrid 本身而不是正则表达式？

Answer 1

好吧，我已经找到了解决我的问题的方法，我已经使用 javascript 实现了。

不确定这是否是最佳解决方案，但考虑到使用 asp.net 博客中描述的方法并不能像我当前的方法(在 webgrid 构造函数中定义 CSS)那样轻松地设置页脚样式，这是最好的方法 - 我希望在这个时代没有人关闭 javascripts，这会阻止它运行。

基本上我所做的是

var gridFooterHTML = $("td")[0].innerHTML;
var gridFooterText = $("td")[0].innerText;

var gridArrayText = gridFooterText.split(" ");

for (var i = 0; i < gridArrayText.length; i++) {

    var checkPosition = gridFooterHTML.indexOf(gridArrayText[i] + " ");

    if (checkPosition != -1) {
        var x = gridFooterHTML.replace(gridArrayText[i], "<a id=\"currentPage\">" + gridArrayText[i] + "</a>");
        $("td")[0].innerHTML = x;
    }

}

我的元素没有任何其他表，所以我只是使用 $("td") 标签访问它。

我首先获取内部文本并在有空格时拆分它们。

对于 innertext 中的每个元素，我检查它的位置，并从 innerHTML 添加一个空格字符。

如果它返回 -1 以外的值，我已经找到了我需要的位置，所以我将 HTML 文本(目前只是一个数字)替换为一个 id。

现在这个数字有一个 ID，我可以使用 CSS 定位它并应用与其他页面链接相同的格式。

希望这对可能使用过 webgrids 的其他人有所帮助。