1

まず、コンテキストについて説明します。

2つ以上のグリッド（jqgrid）を持つビューがあり、展開/折りたたみボタンに「X」を入れたい。

私は試していましたが、最終的に「X」アイコンを取得しましたが、すべてのグリッドで次のコードを使用しています。

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

1-必要なグリッドの展開/折りたたみボタンのアイコンのみを変更するにはどうすればよいですか？

4

2 に答える 2

2

jqGridはキャプションレイヤーの「閉じる」ボタン内に「ui-icon-circle-triangle-n」「ui-icon-circle-triangle-s」アイコンを使用しています。たとえば、「ui-icon-circle-triangle-n」アイコンを「ui-icon-closethick」に変更するには ( jQuery UI CSS Frameworkを参照)、次の手順を実行できます。

  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");
    }
}

デモで結果を見ることができます：

ここに画像の説明を入力

于 2012-05-15T16:34:26.167 に答える
1

最初のグリッドのコンテナー ID がgrd_asset_containerであるとします。これを使用して、1 つのグリッドをターゲットにすることができます

#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; }
于 2012-05-15T16:34:35.063 に答える