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

jQuery を利用する方法

Visual Studio 2010 は標準でjQueryをサポートしているため、「空のWebアプリケーション」以外で、新しいプロジェクトを作成すれば自動的に必要なファイルが追加されます。

他のプロジェクトで利用したい場合は、Scriptフォルダをコピーすれば使えます。

あとは、jQuery をページにインポートしてスクリプトを記述するだけ。

<script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
ここにスクリプトを記述
</script>

■参考
http://msdn.microsoft.com/ja-jp/asp.net/gg638968

TreeViewコントロールの使い方

表示例

TreeViewコントロール(線の表示有り)

<asp:TreeView ID=”tree” runat=”server”
EnableClientScript=”False” ExpandDepth=”0″
LineImagesFolder=”~/TreeLineImages” ShowLines=”True”>

ノードを追加する

Dim node As New TreeNode()
node.Value = reader.GetString(0) ‘ ノード値
node.Text = reader.GetString(1)  ‘ ノード・テキスト



tree.Nodes.Add(node)

ノードごとにアイコンを設定する

Select Case parent
Case “-”
node.ImageUrl = “~/image/cloudservice.ico”
Case “http://jp.msn.com/”
node.ImageUrl = “~/image/folder.ico”
Case Else
node.ImageUrl = “~/image/icon.ico”
End Select

動的に子ノードを取得

Windowsエクスプローラ風のUI

Windowsエクスプローラ風のUIをASP.NETで作成する際に参考にしたURLのメモ書き。
■TreeViewの表示
http://www.atmarkit.co.jp/fdotnet/dotnettips/462asptreepopulate/asptreepopulate.html
■GridViewの表示
http://www.atmarkit.co.jp/fdotnet/aspnet/aspnet16/aspnet16_03.html
■frameset分割とページ遷移
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?forum=7&topic=25617
■概要
1.左右にフレーム分割
2.左(name=”left”)にTreeViewのWebフォームを表示
3.右(name=”right”)にGridViewのWebフォームを表示
4.TreeViewのSelectedNodeChangedイベントでページ遷移

Session(“myTreeSelectValue”) = DirectCast(sender, TreeView).SelectedValue
Response.Write(“<script language=’JavaScript’>parent.right.location.reload();</Script>”)