お世話になっております。
ASP.NET2.0 + AJAX
VS2008 VB でWEB開発しております。
GridView のヘッダー固定と列固定を同時に行いたく、試行錯誤しております。
ヘッダー固定のみでしたら、CSS適用のみで問題ないかと思うのですが、自分の携わっているパーツが
列固定もしなければならない仕様ですので、試行錯誤しておりました。
こちらを参考に
aspx 側にスタイルを記述しまして、GridViewに外のdivを基準にスタイルを適用しました。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="aqua_Default" title="" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="../css/base.css" />
// ここからスタイル
<style type="text/css">
/* Locks the left column */
td.locked, th.locked {
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
/*IE5+ only*/
}
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 2;}
</style>
// ここからまでスタイル
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<button id="toggle" onclick="lockCol('GridView1')" type="button">Lock First Column</button>
<div id="div-datagrid" style ="width: 1000px; height:500px; overflow:auto;">
<asp:GridView ID="GridView1" runat="server" AllowPaging="false"
AutoGenerateColumns="False" BorderColor="Black"
CaptionAlign="Left" CssClass="active"
DataKeyNames="A,B,C"
EnableTheming="True" ForeColor="#000040"
GridLines="None" Height="1000px"
OnRowDataBound="GridView1_RowDataBound"
OnRowCommand="GridView1_RowCommand" PageSize="16" Width="2000px">
<PagerSettings FirstPageText="&lt;&lt;" />
<RowStyle Font-Size="16px" ForeColor="Black" HorizontalAlign="Left" />
<PagerStyle ForeColor="Black" HorizontalAlign="Left" />
<EditRowStyle ForeColor="Black" />
<Columns>
<asp:BoundField DataField="A" HeaderText="" HeaderImageUrl ="~/images/A_180_30.jpg"
meta:resourcekey="BoundFieldResource1" SortExpression="appoint_date" ItemStyle-Width="250px">
</asp:BoundField>
<asp:BoundField DataField="B" HeaderText="" HeaderImageUrl ="~/images/B_180_30.jpg"
meta:resourcekey="BoundFieldResource1" SortExpression="appoint_date" ItemStyle-Width="250px">
</asp:BoundField>
<asp:BoundField DataField="C" HeaderText="" HeaderImageUrl ="~/images/C_180_30.jpg"
meta:resourcekey="BoundFieldResource1" SortExpression="appoint_date" ItemStyle-Width="250px">
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="Freezing" HorizontalAlign="Center"
VerticalAlign="Middle" />
</asp:GridView>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
VB側
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
e.Row.Cells(0).CssClass = "locked"
e.Row.Cells(1).CssClass = "locked"
End Sub
確かに、ヘッダーの列固定は可能になりましたが、表示されるまでに、５～６分かかってしまいました。
これでは、全く使用できるレベルではないので、
style.css に
別に
<style type="text/css">
/* Locks the left column */
td.locked, th.locked {
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
/*IE5+ only*/
}
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 2;}
</style>
を記述して、aspxからは、スタイルの記述をやめ、
header部に
<link href="../CSS/Styles.css" rel="stylesheet" type="text/css" />
このリンクを行うことで、
スタイルを外部に記述しました。
しかし、その場合、起動時にjavascriptのオブジェクトが見つかりません。
というエラーのために、正しくGridViewを表示できずに、エラー終了しました。
できた、GridViewのソースです。
<table>
<tr>
<td colspan="2" align="left" style=" color: white; background-color:WHITE; width: 100%;" valign="middle">
<button id="toggle" onclick="lockCol('GridView3')" type="button">Lock First Column</button>
<div id="div-datagrid" style ="width: 1000px; height:500px; overflow:auto;">
<div class="AspNet-GridView" id="GridView3">
<table cellpadding="0" cellspacing="0" summary="" class="active">
<thead>
<tr class="Freezing">
<th class="locked" scope="col"><img src="../images/A_180_30.jpg" alt="" style="border-width:0px;" /></th>
<th class="locked" scope="col"><img src="../images/B_180_30.jpg" alt=""! style="border-width:0px;" /></th>
<th class="GridBorder_time" scope="col"><img src="../images/C_180_30.jpg" alt="" style="border-width:0px;" /></th>
<th class="GridBorder_time" scope="col">22:00</th>
</tr>
</thead>
<tbody>
<tr>
<td class="locked">A</td>
<td class="locked">B</td>
<td class="GridBorder_time">C</td>
</tr>
</tbody>
</div>
</table>
サーバーサイドで、GridViewの列固定は、難しいという結論に至ったのですが、
何か、やり方がまずいのでしょうか。
また、ソース参照で、クライアント側のjavascriptで、スタイルを適用している
ソースもありましたので、クライアントサイドで、ボタンタイミングで、
ヘッダー、列固定のタイミングを各tdのスタイルに入れていくという
形で対応しました。
<script type="text/javascript">
function lockCol(tblID) {
var table = document.getElementById(tblID);
var button = document.getElementById('toggle');
var cTR = table.getElementsByTagName('tr'); //collection of rows
for (i = 0; i < cTR.length; i++)
{
if (i == 0) {
//ヘッダー固定
var tr = cTR.item(i);
tr.cells[0].className = 'locked2'
for (j = 1; j < 59; j++)
{
tr.cells[j].className = 'locked'
}
}
else{
//１列目固定
var tr = cTR.item(i);
tr.cells[0].className = 'locked2'
}
}
button.innerText = "Unlock First Column";
}
</script>
しかし、このスタイルを適用すると、画面の動きやscrollbarの
動きが、遅くなる為、何とか、外出しのcssのリンクから、
スタイルを読み出したいと思うのですが、一番の原因は何でしょうか。
動作が、遅くならない方法をどなたか、ご存知であれば、
ご教授いただければ幸いです。
