asp.net - 可以从 jqGrid 标题中更改展开/折叠按钮图标吗？

Question

首先，我将解释上下文。

我有一个包含 2 个或更多网格 (jqgrid) 的视图，并且想在展开/折叠按钮中添加一个“X”。

我正在尝试并最终获得“X”图标，但在所有网格中，使用以下代码：

 .ui-icon-circle-triangle-n
    {
        background-position: -31px -192px !important;
    }

1 - 我怎样才能只更改我想要的网格中展开/折叠按钮的图标？

Answer 1

jqGrid 在标题层的“关闭”按钮内使用“ui-icon-circle-triangle-n”和“ui-icon-circle-triangle-s”图标。例如，要将“ui-icon-circle-triangle-n”图标更改为“ui-icon-closethick”（请参阅​​ jQuery UI CSS 框架），您可以执行以下步骤：

1. 您应该直接在创建网格时更改图标的初始值。您想对页面上的所有网格执行此操作，因此您可以执行以下操作

$(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span")
    .removeClass("ui-icon-circle-triangle-n")
    .addClass("ui-icon-closethick");

1. onHeaderClick您必须在“打开”网格后更改回调内部的图标：

onHeaderClick: function (gridstate) {
    if (gridstate === "visible") {
      $(this).closest(".ui-jqgrid-view")
          .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span")
          .removeClass("ui-icon-circle-triangle-n")
          .addClass("ui-icon-closethick");
    }
}

您可以在演示中看到结果：

Answer 2

假设第一个网格的容器 id 是grd_asset_container。你可以用它来定位一个网格

#grd_asset_container div.ui-jqgrid-titlebar .ui-icon-circle-triangle-n, #grd_asset_container div.ui-jqgrid-titlebar .ui-icon-circle-triangle-s { background-position: -32px -192px !important; }