Question

我需要更改jqgrid使用的前向（＆gt;，＆gt; |）和后退（＆lt;，|＆lt;）寻呼机图标。我想要使用的图标已包含在jquery ui文件ui-icons_888888_256x240.png中。我该如何做到这一点？

更新

基于此处的响应[jqGrid寻呼机区域 - 使用字体真棒图标，我已将以下代码添加到我的页面，但图标没有变化。我正在寻找寻呼机，但我认为我没有获得图标范围。我做错了什么？

<script type="text/javascript">
var $pager = $("#" + pagerName);

var icon = $pager.find(".ui-icon>span.ui-icon-seek-first");
    icon.removeClass("ui-icon-seek-first");
    icon.addClass("ui-icon-arrowthickstop-1-w");

$pager.find(".ui-icon>span.ui-icon-seek-prev")
    .removeClass("ui-icon-seek-prev")
    .addClass("ui-icon-arrowthick-1-w");

$pager.find(".ui-icon>span.ui-icon-seek-next")
    .removeClass("ui-icon-seek-next")
    .addClass("ui-icon-arrowthickstop-1-e");

$pager.find(".ui-icon>span.ui-icon-seek-end")
    .removeClass("ui-icon-seek-end")
    .addClass("ui-icon-arrowthick-1-e");

</script>

Answer 1

我没有意识到任何覆盖jqgrid使用的按钮的JavaScript代码都需要包含在加载jqgrid的JavaScript函数中。以下是我使用的代码：

  // Override default pager icons
  $grid = $("#" + listName);
  $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");

  var icon = $pager.find(".ui-pg-button>span.ui-icon-seek-first");
      icon.removeClass("ui-icon ui-icon-seek-first");
      icon.addClass("ui-icon ui-icon-arrowthickstop-1-w");

  $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
      .removeClass("ui-icon ui-icon-seek-prev")
      //.addClass("ui-icon ui-icon-arrowthick-1-w")
      .addClass("ui-icon ui-icon-triangle-1-w")
      ;

  $pager.find(".ui-pg-button>span.ui-icon-seek-next")
      .removeClass("ui-icon ui-icon-seek-next")
      //.addClass("ui-icon ui-icon-arrowthick-1-e")
        .addClass("ui-icon  ui-icon-triangle-1-e")
      ;

  $pager.find(".ui-pg-button>span.ui-icon-seek-end")
      .removeClass("ui-icon ui-icon-seek-end")
      .addClass("ui-icon ui-icon-arrowthickstop-1-e");

Answer 2

编辑好的，在这种情况下：

// First page: |<
$("#first_your-pagerID span").removeClass("ui-icon-seek-first");
$("#first_your-pagerID span").addClass("ui-icon-newicon");

// Prev page: <
$("#prev_your-pagerID span").removeClass("ui-icon-seek-prev");
$("#prev_your-pagerID span").addClass("ui-icon-newicon");

// Last page: >|
$("#last_your-pagerID span").removeClass("ui-icon-seek-end");
$("#last_your-pagerID span").addClass("ui-icon-newicon");

// Next page: >
$("#next_your-pagerID span").removeClass("ui-icon-seek-next");
$("#next_your-pagerID span").addClass("ui-icon-newicon");

将your-pagerID更改为寻呼机的ID。

从UI图标文件（ui-icons_888888_256x240.png）将ui-icon-newicon更改为新图标的类

jqgrid更改寻呼机使用的图标

2 个答案: