jQueryでGridViewのテーブルを選択する。

久々の技術ネタ。
仕事で「GridViewのテーブルを選択して、選択した行の詳細を別画面で表示する」という機能を実装することになったので、jQueryを使って行を選択できるようにしたという話です。

jQuery UI Selectableを使えばいい

ということで、「jQuery table 選択」といったキーワードでGoogle先生に聞いてみたところ、jQuery UI Selectableを使えばいいということが分かりました。

jQuery UI Selectable で、テーブルの行選択 - Still Laughin'

GridViewで使う場合はCSS Friendly Control Adapterが必要

上記のサイトを元にしてスクリプトを書いてみたのですが、うんともすんとも言わず。
htmlソースを見てみると、tbodyタグが無い。
ちょっと調べてみるとtbodyタグが無い。セレクタの内容を変えてみたのですがうまくいかず。
そんな状態でtbodyタグをつけるにはどうしたらいいのかを調べてみたらCSS Friendly Control Adapters - Homeを使えばいいことが分かりました。

上記サイトの解説にしたがって設定をしていきます。
CSS Friendly Control Adapters - Homeのサイトからdllを落として参照設定、App_Browsersディレクトリを追加してその中に CSSFriendlyAdapters.browserを追加、zipファイルを落としてその中のCSSFriendly/CSS と CSSFriendly/JavaScriptをプロジェクトディレクトリ直下に配置しました。

divタグのなかにtableタグが

ここまでの設定をやって、実行時のhtmlソースを見るとdivタグにGridViewのidがついて、その配下にtableタグがあるような構造になりました。tbodyタグも無事つきました。
さて、ここで問題なのがGridViewのid。作っていた画面はマスタページを適用しているので、idが"ctl00~"というように書き替わってしまいます。このidを使ってセレクタを書くのがいやだったので、一つ外側にdivタグをつけるような形にしました。

ソースコード

ということで出来上がったソースコードはこんな形になりました。（サンプル用にコードを書いています）

<html>
  <head>
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript">
      <!-- 
      $(function() {
        $("#selectable div table tbody").selectable({filter: 'tr'});
      });
      // -->
    </script>
    <style type="text/css">
      #selectable div table tbody .ui-selecting { background: #FECA40; }
      #selectable div table tbody .ui-selected { background: #F39814; color: white; }
    </style>
  </head>
  <body>
    <div id="selectable">
      <div id="gridview1">
        <table>
          <thead>
            <tr>
             <th>col1</th>
             <th>col2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>hoge</td>
              <td>hoge</td>
            </tr>
            <tr>
              <td>fuga</td>
              <td>fuga</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

外側のdivタグにidないしはclassを付け、セレクタの起点にします。そこからdiv table tbodyと辿る形でセレクタを書いて、selectableの処理を書きました。

続きは後日

ということで、jQueryを使ってGridViewの行を選択できるようになりました。ここからコードビハインドページに書いた処理を呼び出したいとこなのですが、まだそこまでやってないので今日はここまで。

Create a new world

きっと誰もが新しい世界を作り続けているんだよ。