GridViewのタイトル行を固定して、スクロールを可能にする

GridViewのタイトル行を固定して、スクロールを可能にする方法は色々ありますが、IE限定の方法だったり、実装が面倒だったり、ググるとニーズは多く、皆さん苦労しているようです。

しかし、jQueryプラグイン「Lightweight Scrollable Tables」を使うと簡単にできそうです。

■表示例

■使い方
1.プラグインをダウンロード(http://plugins.jquery.com/project/scrollableTable
2.jsファイルを自分のプロジェクトに追加(Scriptフォルダ等にコピー)
3.下のようにjQuery をページにインポートしてスクリプトを記述する

GridViewが縦250pxを超えたらスクロールバーを表示する例

<div>
<asp:gridview ID=”datagrid” runat=”server”>
</asp:gridview>
</div>
<script src=”Scripts/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script src=”Scripts/scrollbarTable-0.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
(function ($) {
$(‘table’).scrollbarTable(250);
})(jQuery);
</script>

■元ネタ
http://phpspot.org/blog/archives/2011/05/jquerylightweig.html

コメントを残す

メールアドレスが公開されることはありません。