GRIDVIEW的表头和列固定滚动代码参照下面 IE6,IE7,IE8,FF测试OK
问题:GRIDVIEW的记录2000以上（目前500），由于js对table行列删除，显示速度慢，
cloneNode速度快，有没有好的方法代替deleteRow，deleteCell
※另:如果不删除多余的行和列，用left(-XXX)速度还可以，不过最好能删除
javascript:FixedGridViewHeaderItems中循环麻烦达人修正，thanks!
client:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Fix Header,Left Of GridView</title>
<script language ="javascript" type="text/javascript" >
function FixedGridViewHeaderItems(gvID, fixedCellsCount) {
try {
var gvItems = document.getElementById(gvID);
//header
var tmpgvItems = gvItems.cloneNode(true);
//left
var tmpgvFixed = gvItems.cloneNode(true);
for (i = gvItems.rows.length - 1; i > 0; i--) {
tmpgvItems.deleteRow(i);
for (j = gvItems.rows.item(0).cells.length - 1; j >= 0; j--) {
if (j > fixedCellsCount-1) {
tmpgvFixed.rows.item(i).deleteCell(j);
}
else {
gvItems.rows.item(i).deleteCell(j);
}
}
}
gvItems.deleteRow(0);
tmpgvFixed.deleteRow(0);
//conner
var tmpgvConner = tmpgvItems.cloneNode(true);
for (j = tmpgvItems.rows.item(0).cells.length - 1; j >= 0; j--) {
if (j > fixedCellsCount - 1) {
tmpgvConner.rows.item(0).deleteCell(j);
}
else {
tmpgvItems.rows.item(0).deleteCell(j);
}
}
document.getElementById("divShowItemsHeader").appendChild(tmpgvItems);
tmpgvConner.style.width = "100%";
document.getElementById("divShowItemsConner").appendChild(tmpgvConner);
tmpgvFixed.style.width = "100%";
document.getElementById("divShowItemsFixed").appendChild(tmpgvFixed);
}
catch (je) {
alert(je);
}
}
function ScrollWithSameLeftItems(div) {
document.getElementById("divShowItemsHeaderScroll").scrollLeft = div.scrollLeft;
document.getElementById("divShowItemsFixedScroll").scrollTop = div.scrollTop;
}
function ShowMouseOverRowItems(row) {
var rowIndex = row.rowIndex;
if (rowIndex != GetSelectedRowIndexItems()) {
var gvItemRowsAll = document.getElementsByName(row.id);
for (var i = 0; i < gvItemRowsAll.length; i++) {
gvItemRowsAll[i].style.backgroundColor = "pink";
}
}
}
function ShowMouseOutRowItems(row) {
var rowIndex = row.rowIndex;
if (rowIndex != GetSelectedRowIndexItems()) {
var gvItemRowsAll = document.getElementsByName(row.id);
for (var i = 0; i < gvItemRowsAll.length; i++) {
gvItemRowsAll[i].style.backgroundColor = "white";
}
}
}
function ShowSelectRowItems(row) {
var selectedindex = GetSelectedRowIndexItems();
if (selectedindex != -1) {
var oldName;
if (document.all) {
oldName = row.parentElement.rows.item(selectedindex).id;
} else {
oldName = row.parentNode.rows.item(selectedindex).id;
}
var gvItemRowsAllOld = document.getElementsByName(oldName);
for (var i = 0; i < gvItemRowsAllOld.length; i++) {
gvItemRowsAllOld[i].style.backgroundColor = "white";
}
}
var gvItemRowsAll = document.getElementsByName(row.id);
for (var i = 0; i < gvItemRowsAll.length; i++) {
gvItemRowsAll[i].style.backgroundColor = "#316AC5";
}
SetSelectedRowIndexItems(row.rowIndex);
}
function GetSelectedRowIndexItems() {
if (document.getElementById("txtSelectedRowIndexItems").value == "") {
return -1;
}
return parseInt(document.getElementById("txtSelectedRowIndexItems").value, 10);
}
function SetSelectedRowIndexItems(rowindex) {
document.getElementById("txtSelectedRowIndexItems").value = rowindex;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border ="0" cellpadding="0" cellspacing ="0">
<tr>
<td>
<div id="divShowItemsConnerScroll" style="width:100px; border:solid 1px;border-bottom-width:0px;border-right-width:0px;background-color:rgb(177,242,168);overflow:hidden;">
<div id="divShowItemsConner"></div>
</div>
</td>
<td><div id="divShowItemsHeaderScroll" style="border:solid 1px;width:383px;border-bottom-width:0px;background-color:rgb(177,242,168);overflow:hidden;">
<div id="divShowItemsHeader"></div>
</div>
</td>
</tr>
<tr>
<td valign="top" >
<div id="divShowItemsFixedScroll" style="width:100px; border:solid 1px;border-right-width:0px;height:183px;overflow:hidden;">
<div id="divShowItemsFixed"></div>
</div>
</td>
<td valign="top" >
<div id="divShowItemsDetails" style="border:solid 1px;height:200px;width:400px;overflow:scroll;" onscroll="ScrollWithSameLeftItems(this);">
<asp:GridView ID="gvShowItemsDetails" name="gvShowItemsDetails" runat="server"
AutoGenerateColumns="False" Width="882px" HeaderStyle-Height="20px"
RowStyle-Height="20px" onrowdatabound="gvShowItemsDetails_RowDataBound">
<Columns>
<asp:TemplateField>
<HeaderStyle Wrap="False" Width="30px" HorizontalAlign="Center" />
<ItemStyle Wrap="False" Width="30px" HorizontalAlign="Center"/>
<HeaderTemplate>S</HeaderTemplate>
<ItemTemplate><asp:CheckBox ID="ckSelected" runat="server" Checked='<%# (DataBinder.Eval(Container.DataItem, "SELECTED")).ToString() == "1" %>' /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle Wrap="False" Width="30px" HorizontalAlign="Center" />
<ItemStyle Wrap="False" Width="30px" HorizontalAlign="Center"/>
<HeaderTemplate>NO</HeaderTemplate>
<ItemTemplate><%# gvShowItemsDetails.Rows.Count + 1 %></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAME1">
<HeaderStyle Wrap="False" Width="170px" HorizontalAlign="Left" />
<ItemStyle Wrap="False" Width="170px" HorizontalAlign="Left"/>
<ItemTemplate><%#DataBinder.Eval(Container.DataItem, "NAME1")%></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAME2">
<HeaderStyle Wrap="False" Width="170px" HorizontalAlign="Left" />
<ItemStyle Wrap="False" Width="170px" HorizontalAlign="Left"/>
<ItemTemplate><%#DataBinder.Eval(Container.DataItem, "NAME2")%></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAME3">
<HeaderStyle Wrap="False" Width="230px" HorizontalAlign="Left" />
<ItemStyle Wrap="False" Width="230px" HorizontalAlign="Left"/>
<ItemTemplate><%#DataBinder.Eval(Container.DataItem, "NAME3")%></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAME4">
<HeaderStyle Wrap="False" Width="90px" HorizontalAlign="Left" />
<ItemStyle Wrap="False" Width="90px" HorizontalAlign="Left"/>
<ItemTemplate><%#DataBinder.Eval(Container.DataItem, "NAME4")%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
<asp:TextBox ID="txtSelectedRowIndexItems" TabIndex="-1" MaxLength="255" style="display:none" runat="server" Width="0px"></asp:TextBox>
</div>
</form>
</body>
</html>
