[HELP]GRIDVIEW的表头和列固定滚动，有性能问题，麻烦请修正

rickjelly2004 2010-10-15 12:41:10
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>
...全文
194 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
rickjelly2004 2010-11-08
  • 打赏
  • 举报
 回复
稍微改善了一下，1000行10列，10秒左右
javascript的方法修正了，可能把appendChild全部替换成innerHTML可能更快。

function FixedGridViewHeaderItems(gvID, fixedCellsCount) {
try {
var gvItems = document.getElementById(gvID);
var rowsCount;
var cellsCount;
rowsCount = gvItems.rows.length;
cellsCount = gvItems.rows.item(0).cells.length;
// header(LR)
var headerL = gvItems.cloneNode(false);
var headerR = gvItems.cloneNode(false);

// Item(L)
var itemL = gvItems.cloneNode(false);
var itemR = gvItems.cloneNode(false);

headerL.appendChild(gvItems.rows.item(0).cloneNode(true));
headerR.appendChild(gvItems.rows.item(0).cloneNode(true));

for (j = cellsCount-1; j >=0; j--) {
if (j > fixedCellsCount - 1) {
headerL.children[0].removeChild(headerL.children[0].children[j]);
}
else {
headerR.children[0].removeChild(headerR.children[0].children[j]);
}
}

for (i = 1; i < rowsCount; i++) {
var itr = gvItems.rows.item(i).cloneNode(false);
var iRtr = gvItems.rows.item(i).cloneNode(false);
var iCell, iRCell;

for (j = 0; j < cellsCount; j++) {
if (j < fixedCellsCount) {
iCell = gvItems.rows.item(i).cells.item(j).cloneNode(true);
itr.appendChild(iCell);
}
else {
iRCell = gvItems.rows.item(i).cells.item(j).cloneNode(true);
iRtr.appendChild(iRCell);
}
}
itemL.appendChild(itr);
itemR.appendChild(iRtr);
}

if (document.all) {
document.getElementById("divShowItemsHeader").innerHTML = headerR.outerHTML;
headerL.style.width = "100%";
document.getElementById("divShowItemsCorner").innerHTML = headerL.outerHTML;
itemL.style.width = "100%";
document.getElementById("divShowItemsFixed").innerHTML = itemL.outerHTML;
document.getElementById("divShowItemsDetails").innerHTML = itemR.outerHTML;
}
else {
var headerLDiv = document.createElement("div");
var headerRDiv = document.createElement("div");
var itemLDiv = document.createElement("div");
var itemRDiv = document.createElement("div");
headerL.style.width = "100%";
itemL.style.width = "100%";
headerLDiv.appendChild(headerL);
headerRDiv.appendChild(headerR);
itemLDiv.appendChild(itemL);
itemRDiv.appendChild(itemR);

document.getElementById("divShowItemsCorner").innerHTML = headerLDiv.innerHTML;
document.getElementById("divShowItemsHeader").innerHTML = headerRDiv.innerHTML;
document.getElementById("divShowItemsFixed").innerHTML = itemLDiv.innerHTML;
document.getElementById("divShowItemsDetails").innerHTML = itemR.outerHTML;
}

}
catch (je) {
alert(je);
}
}
无爱大叔 2010-10-28
  • 打赏
  • 举报
 回复
另外
e.Row.Style.Add("cursor", "hand");
e.Row.Attributes.Add("id", "gvShowItemsDetails_Row" + e.Row.RowIndex.ToString());
e.Row.Attributes.Add("onmouseover", "javascript:ShowMouseOverRowItems(this);");
e.Row.Attributes.Add("onmouseout", "javascript:ShowMouseOutRowItems(this);");
e.Row.Attributes.Add("onclick", "javascript:ShowSelectRowItems(this);");
这些代码的onmouseover onclick等事件如果用jquery动态给行去加事件控制，速度应该会快很多
无爱大叔 2010-10-28
  • 打赏
  • 举报
 回复
你可以看一下：http://user.qzone.qq.com/你的QQ号/infocenter
这个页面的效果就是分布取数据的，页面滚动时才去取剩下的
无爱大叔 2010-10-28
  • 打赏
  • 举报
 回复
最好是不要一下取500条，比如先取50条，够页面显示的就可以了。
既然是表头固定，那么肯定有下拉滚动条了，js写当下拉时(貌似是onscroll事件)执行ajax取剩下的N条，直到取完
rickjelly2004 2010-10-18
  • 打赏
  • 举报
 回复
如果用正则替换，是否能够提高速度呢？
rickjelly2004 2010-10-17
  • 打赏
  • 举报
 回复
ren ne
rickjelly2004 2010-10-15
  • 打赏
  • 举报
 回复
FIREFOX中行选中颜色，少了一句代码
RowDataBound事件中
e.Row.Attributes.Add("name", "gvShowItemsDetails_Row" + e.Row.RowIndex.ToString());
wwfgu00ing 2010-10-15
  • 打赏
  • 举报
 回复
参考
龍月 2010-10-15
  • 打赏
  • 举报
 回复
关注。。。
rickjelly2004 2010-10-15
  • 打赏
  • 举报
 回复


Server:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
InitBlankDetailsItemsDataTable();
}
//固定2列
this.ClientScript.RegisterStartupScript(this.GetType(), "showheader", "FixedGridViewHeaderItems('" + this.gvShowItemsDetails.ClientID + "','2');", true);
}

protected void InitBlankDetailsItemsDataTable()
{
DataTable dataItems = new DataTable();
DataRow dr;
dataItems = new DataTable();
dataItems.Columns.Add("ITEMTYPE", typeof(String));
dataItems.Columns.Add("SELECTED", typeof(String));
dataItems.Columns.Add("NAME0", typeof(String));
dataItems.Columns.Add("NAME1", typeof(String));
dataItems.Columns.Add("NAME2", typeof(String));
dataItems.Columns.Add("NAME3", typeof(String));
dataItems.Columns.Add("NAME4", typeof(String));
dataItems.Columns.Add("NAME5", typeof(String));
dataItems.Columns.Add("NAME6", typeof(String));

for (int i = 0; i < 500; i++)
{
dr = dataItems.NewRow();
dr["SELECTED"] = "1";
dr["NAME1"] = i.ToString();
dataItems.Rows.Add(dr);
}
dataItems.AcceptChanges();

this.gvShowItemsDetails.DataSource = dataItems;
this.gvShowItemsDetails.DataBind();
}

protected void gvShowItemsDetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Style.Add("cursor", "hand");
e.Row.Attributes.Add("id", "gvShowItemsDetails_Row" + e.Row.RowIndex.ToString());
e.Row.Attributes.Add("onmouseover", "javascript:ShowMouseOverRowItems(this);");
e.Row.Attributes.Add("onmouseout", "javascript:ShowMouseOutRowItems(this);");
e.Row.Attributes.Add("onclick", "javascript:ShowSelectRowItems(this);");
}
}
}
龍月 2010-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 rickjelly2004 的回复:]
FIREFOX中行选中颜色，少了一句代码
RowDataBound事件中
e.Row.Attributes.Add("name", "gvShowItemsDetails_Row" + e.Row.RowIndex.ToString());
[/Quote]
GridView固定表头和列 实例（GridView冻结表头和列）
本实例主要关注如何实现GridView的固定表头和列，使得用户在滚动浏览长表格时，表头和部分列始终保持可见，提高用户体验。 GridView冻结表头和列的需求在大数据量展示时尤为重要，因为表头的可见性有助于用户在浏览...
Android GridView完美横向滑动 ，并且可限制Gridview显示行数！
7. **布局嵌套**：如果你的GridView内部有复杂的布局，比如ImageView和TextView的组合，需要注意避免嵌套权重（weight）导致的性能下降。尽可能使用确定的尺寸，减少布局的计算时间。 8. **触摸事件处理**：在处理...
android Gridview分页实现
GridView是ListView的一种变体，它按照指定的列数来排列子视图。默认情况下，GridView会一次性加载所有数据，这可能导致内存溢出，尤其是在数据量大的情况下。因此，我们需要实现分页加载，即按需加载数据。 分页...
RecyclerView 瀑布流、ListView、GridView实例源码
在Android开发中，UI界面的展示是至关重要的，RecyclerView、ListView和GridView是常见的列表控件，用于展示大量的数据。本文将深入探讨这三个组件，并通过一个Demo_recyclerview的实例源码来解析它们的工作原理和...
android 通过GridView控件获取本地图片并动态显示 程序源码
文章是参考博客http://blog.csdn.net/eastmount/article/details/41808179完成，主要讲述通过GridView控件点击加号图片动态添加本地相册图片，点击图片可以删除已...同时界面比较美观。 免费资源，希望对大家有所帮助。
.NET社区

62,243

社区成员

668,998

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章