QA@IT

ASP.NET(C#) [Grid.js][Grid.css]を使用したGridViewの行列固定時に特定セルの色づけ

10546 PV

ASP.NET(C#)で[Grid.js][Grid.css]を使用しGridViewの行列固定を行いました。
この状態で特定のセルに色を付けたいのですが方法が分かりません。
[Grid.js]と[Grid.css]によりGridViewはdivになっており開発者ツールで確認すると
次の様になっています。

<div class="style1" id="myGrid">
  <div class="g_Base">
    <div class="g_Head">
    <div class="g_Foot">
    <div class="g_Body">
      <div class="g_BodyFixed">
      <div class="g_BodyStatic">
        <div class="g_Cl g_Cl0 g_FCl">
        <div class="g_Cl g_Cl1">
          ↓セル部分↓
          <div class="g_C g_BR g_R0">
          <div class="g_C g_BR g_R1">

この時、どのようにしてセルを指定し色を付ければ良いのでしょうか?
また、セルの色を動的に変えることは可能でしょうか?
ご教授よろしくお願いいたします。

回答

$(function () {
    $(".g_R1").css("background-color", "red");
});

に代えて、以下のようにしたらうまく行きませんか?

setTimeout(changebackcolor, 0);

function changebackcolor() {
    $('#myGrid div[class="g_Cl g_Cl1"] div[class="g_C g_BR g_R1"]').css("background-color", "red");
}
編集 履歴 (0)
  • ありがとうございます。
    試してみたのですが、色が変わらなかったです。
    しかし、[Grid.js]の中を少しいじり、セルとなっている`div`に任意の`id`を付けて、上記のコードに当てはめたところセルの色が変わりました。
    やはりclassでの指定は難しいのでしょうか。
    -
  • 難しくはないです。やり方の問題でしょう。どうしたのか分かりませんが、実際、背景色は変えられてのですよね。 -
  • 念のため、以下の URL のページのサンプルコードを使って検証してみました。上記のスクリプトで期待通り Product Name_1 のセルの背景色が赤になります。検証に使ったのは IE9, jquery-1.8.3.min.js です。 -
  • サンプルコードのあるページの URL は下記の通りです。
    http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx
    -
  • ブラウザ(例えば Firefox 30.0)によっては setTimeout(func, delay) の delay がゼロではダメなので注意してください。 -
  • 申し訳ありません。再度コードをSurferOnWwwさんのサイト通りに貼り直し上記のコードを付け加えたらセルの色が変わりました。お手数かけてしまいました。ちなみに私の環境はIE11,jquery-1.4.1.min.jsで行いました。また、もう一つ躓いていることがありまして、サーバー側(.cs)の処理の結果でセルの背景色を動的に変えたいと思ったときにどういった方法があるのでしょうか? -
  • ClientScriptManager クラスを利用して、クライアントスクリプトを追加してはいかがですか?
    http://msdn.microsoft.com/ja-jp/library/system.web.ui.clientscriptmanager(v=vs.100).aspx
    -

SurferOnWwwさんの仰る通り、ClientScriptManagerクラスを利用してできました!!

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = CreateDataTable();
                GridView1.DataBind();

                int column = 2;
                int row = 2;

                string scriptText = "";
                scriptText += "setTimeout(changebackcolor, 0);";
                scriptText += "function changebackcolor() {";
                scriptText += "$('#myGrid div[class=\"g_Cl g_Cl" + column + "\"] ";
                scriptText += "div[class=\"g_C g_BR g_R" + row + "\"]')";
                scriptText += ".css(\"background-color\", \"red\");}";

                ClientScript.RegisterClientScriptBlock(
                   this.GetType(), "SetColor", scriptText, true);
            }
        }

本当にありがとうございます!!
また、何かありましたらよろしくお願いします!!

編集 履歴 (0)
  • 先にも書きましたが、ブラウザによっては setTimeout(func, delay) の delay がゼロではダメなので注意してください。25 ぐらいの数字を入れておいた方がよさそうです(使用する予定のブラウザで確認してください)。 -
  • 分かりました。IEを予定していますが、念のため25を入れておきます。ありがとうございます! -
  • 遅れ遅れになりましたが、解決して何よりです。 -

Grid生成より先にCSS設定が先になってしまいますよ!

        $(function () {
            var myGrid = new Grid("demoGrid", {
                srcType: "dom",
                srcData: "demoTable",
                allowGridResize: true,
                allowColumnResize: true,
                allowClientSideSorting: true,
                allowSelections: true,
                allowMultipleSelections: true,
                showSelectionColumn: false,
                colBGColors: ["#fafafa"],
                fixedCols: 1
            });

            $(".g_Cl.g_Cl3").css("background-color", "#ff0000");
            $(".g_R5").css("background-color", "#00ff00");
            $(".g_BodyStatic .g_Cl8 .g_R1").css("background-color", "#0000ff");
        });

でどうでしょう。

編集 履歴 (1)
  • akira_onozukさん、ありがとうございます。
    教えて下さったコードでセルの背景色が変わりました。
    デバッグで確かめたところcss()の方が早く実行されていました。
    とても勉強になります。また、サーバー側(.cs)の処理の結果でセルの背景色を動的に変えたいと思ったときにどういった方法があるのでしょうか?
    -
  • 無事背景色が変わり何よりです。
    サーバ側の処理ということですので、GridViewのRowDataBoundイベントあたりで設定するのが簡単ですかね。
    http://www.oborodukiyo.info/ASPNET/VS2008/ASPNET-ChangeRowBackcolorByValue.aspx
    この辺はG先生に検索すればたっぷりあるかと思います。
    -
  • 横レスでなんですが、GridView が生成する table と Grid.js がその table の DOM から生成するテーブル(div 要素の集まり)は別物です。GridView 側のスタイルは Grid.js が生成するテーブルには反映されないはずです。 -
  • なので、別に書きましたが「ClientScriptManager クラスを利用して、クライアントスクリプトを追加」という手段がもっとも簡単だと思います。その場合、もともとあるスクリプトのコードにそれを割り込ませるのは無理ですので、私が書いたようなコードにせざるを得ないと思います。 -
  • 今回[Grid.js]を使用し行列の固定を行いましたので、順番的にはサーバー側で作成したGridViewをクライアント側でdiv要素に置き換えて表示させているようです。サーバー側でGridViewのセル背景色を変えてもブラウザ上では変わっていないので色の情報はdivに反映されていないように思います。クライアント側からサーバー側のメソッドの呼び出し等が必要になるのでしょうか? -
  • SurferOnWwwさんのコメントを読まずに投稿してしまいました。上のコメントは気にしないでください。 -
  • SurferOnWwwさんすみませんGridViewのスタイルは継承しませんね!
    なのでSurferOnWwwさんのおっしゃっている方法のClientScriptManegerですね
    -

SurferOnWwwさん、いつも本当にありがとうございます。
質問ばかりで申し訳ないのですが、
2列目/2行目のclass="g_Cl g_Cl1"/class="g_C g_BR g_R1"
をcss()メソッドで指定するにはどのように書けばいいのでしょうか?
cssファイルに直接記述し色々試しているのですが出来ません。
また、

<script type="text/javascript">
  //<![CDATA[
      window.onload = function () {
          var tableGridView =
        document.getElementById("<%=GridView1.ClientID%>");
          var parentElement = tableGridView.parentNode;
          parentElement.setAttribute("id", "myGrid");
          parentElement.setAttribute("class", "style1");

          var gridColSortTypes =
        ["number", "string", "string", "number", "number",
        "number", "number", "string", "none", "date"];

          new Grid("myGrid", {
              srcType: "dom",
              srcData: "<%=GridView1.ClientID%>",
              allowGridResize: true,
              allowColumnResize: true,
              allowClientSideSorting: true,
              allowSelections: true,
              allowMultipleSelections: true,
              showSelectionColumn: false,
              colSortTypes: gridColSortTypes,
              fixedCols: 1
          });
      };
      $(function () {
          $(".g_R1").css("background-color", "red");
      });
  //]]>
  </script>

上記のようにして行(セルの指定が分からないため)を赤く色付けしようとしたところ出来ませんでした。
記述する箇所が悪いのでしょうか?

編集 履歴 (0)

class 名から列・行の場所が判定できるので(例えば 2 列目 / 2 行目は class="g_Cl g_Cl1" / class="g_C g_BR g_R1" というようになっています)、jQuery のセレクタなどを用いてその要素を取得して、css() メソッドでスタイルを指定してはいかがですか?

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。