gridview固定首列，其它的列可以实现左右滚动？？？

ddff2004 2009-01-08 03:53:10

因为数据的列比较多，大概一百多列，所以想把首列固定下来，让其它的列可以实现左右滚动？？？请问该如何实现，在网上找了很多方法都不能实现，请会做的帮帮忙，谢谢。

很流行的一种做法是把gridview放在一个模板里面通过css来实现，可是试了很久没发实现。

...全文

1150 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

kekee 2009-09-28

打赏
举报

//调整gridview的宽度
function __AltGVWidth(gv_id){

var o=document.getElementById(gv_id);
if(o && o.tagName.toUpperCase()=="TABLE"){
o.style.display="none";
o.parentNode.style.width="100%";
o.parentNode.style.textAlign="left";
var widthbef=o.parentNode.scrollWidth;
o.style.display="block";
o.parentNode.style.width="8000px";
o.style.width="auto";
var widthnow=o.scrollWidth+100;
o.parentNode.style.width=widthbef+"px";
o.parentNode.style.overflow="scroll";
o.style.width=widthnow+"px";
}

}

document.write("<style>.PosRelative{position:relative !important;}.SliceContainer{position:absolute;left:0px;top:0px;z-index:100; width:auto; height:auto; display:none}.SliceContainer table{background-color:#C2E0E0}</style>");
//在gridview高度适应的情况下表头列不变
function __GVSlice(gv_id,cols){
var gv=document.getElementById(gv_id);
//document.body.replaceChild(

if(!gv || gv.rows.length<3)
return;
var container=gv.parentNode;
if(!container || container.style.overflow!="scroll")
return;

function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
try{
if ( e && e.stopPropagation ) e.stopPropagation();
else if(e) window.event.cancelBubble = true;
}
catch(e1){}
}
function removeInput(ele){
if(ele&&ele.tagName){
if(ele.tagName.toUpperCase()=="INPUT"||ele.tagName.toUpperCase()=="TEXTAREA"){
//alert(ele.tagName)
var txt=document.createTextNode(ele.value);
//ele.parentNode.insertBefore(txt,ele);
ele.parentNode.replaceChild(txt,ele);
}else{
for(var i=0,o;o=ele.childNodes[i];i++){
removeInput(o);
}
}
}
}

container.className="PosRelative";

//构造gridview 表头对象 gv1
var gv1=document.createElement("table");
var attr=["align","rules","border"];
for(var i=0,o;o=attr[i];i++)
gv1[o]=gv[o];

gv1.cellspacing="0";
gv1.className=gv.className;
gv1.style.borderCollapse="collapse";
gv1.id=gv.id+"_Slice";
gv1.style.border="none";

var gvtr=gv.childNodes(0);
if(gvtr.tagName.toUpperCase()=="TBODY"){
gvtr=gv.childNodes(0).childNodes;
}else{
gvtr=gv.childNodes;
}

for(var i=0,o;o=gvtr[i];i++){
if(o.childNodes(0).colSpan=="1"){
var tr=document.createElement("tr");
tr.className=o.className;
tr.index=i;
for(var j=0;j<cols.length && o.childNodes(cols[j]);j++){
var n=o.childNodes(cols[j]).cloneNode(true);
removeInput(n);
tr.appendChild(n);
}
gv1.appendChild(tr);
}
}

//计算宽度
var GVWidth=0;
for(var j=0;j<cols.length && gvtr[0].childNodes(cols[j]);j++){
GVWidth+=gvtr[0].childNodes(cols[j]).offsetWidth;
}

//构造gridview容器
var div=document.createElement("div");
div.id=gv.id+"_SliceContainer";
div.className="SliceContainer";
div.innerHTML=gv1.outerHTML;
container.appendChild(div);
div.style.width=(GVWidth||30)+"px";

//侦测滚动条事件
function FixGVSlice(){
div.style.display=container.scrollLeft>200?"block":"none";
if(container.scrollLeft ) div.style.left=container.scrollLeft+"px";
}
container.onmouseover=function(e){
this.interval=window.setInterval(FixGVSlice,100);
stopBubble(e);
}
container.onmouseout=function(e){
window.clearInterval(this.interval);
stopBubble(e);
}

//侦测gridview单击事件

gv.onclick=function(){
var td=event.srcElement;
if(td.tagName.toUpperCase()=="TD"){
if(this.selectBefore){
this.selectBefore.style.backgroundColor="";
if(div.selectBefore)
div.selectBefore.style.backgroundColor="";
}
(this.selectBefore=td.parentNode).style.backgroundColor="#78BABA";

stopBubble(event);
}
}

div.onclick=function(){
var td=event.srcElement;
if(td.tagName.toUpperCase()=="TD"){

if(div.selectBefore){
div.selectBefore.style.backgroundColor="";
if(gv.selectBefore)
gv.selectBefore.style.backgroundColor="";
}

td.parentNode.style.backgroundColor="#78BABA";
div.selectBefore=td.parentNode;
(gv.selectBefore=gvtr[div.selectBefore.index]).style.backgroundColor="#78BABA";

stopBubble(event);
}

}

}

gridview 固定首列，仅适用于IE浏览器

调用方法：
GV_1 为gridview的id
[0,2,3,4] 为要固定的列

__AltGVWidth("GV_1");

setTimeout(function(){
__GVSlice("GV_1",[0,2,3,4]);
},200);

hul19830820 2009-01-19

打赏
举报

别争了，楼上的之所以可以，是因为你已经绑定了列了，你那个绑定数据只是增加行，
而前面的绑定时出问题是因为之前没有绑定具体列名

浮生若梦丶 2009-01-08

打赏
举报

自己去看效果，有图
http://blog.csdn.net/fly_to_the_winds/archive/2009/01/08/3735775.aspx

浮生若梦丶 2009-01-08

打赏
举报

哎，我真的是无语你了，我亲自运行出来了还蒙你？你自己没把数据绑定报错说我的不行？要是我会贴图直接贴你看，我郁闷，你自己弄，反正我的出来了，准备发博客里了

xiaoyuzi 2009-01-08

打赏
举报

http://aspdotnetcodebook.blogspot.com/2008/03/how-to-freez-gridview-column.html

How To Freez GridView Column
1.Add a Gridview on page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page </title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div id="div-datagrid"> <asp:GridView ID="Grd" runat="server" AutoGenerateColumns="false" CssClass="Grid" UseAccessibleHeader="true" OnRowDataBound="Grd_RowDataBound" PageSize="10" Height="100px"> <AlternatingRowStyle CssClass="GridAltRow" Wrap="false" /> <RowStyle CssClass="GridRow" Wrap="false"> </RowStyle> <Columns> <asp:BoundField DataField="Id" HeaderText="ID" /> <asp:BoundField DataField="Column2" HeaderText="Column2" /> <asp:BoundField DataField="Column3" HeaderText="Column3" /> <asp:BoundField DataField="Column4" HeaderText="Column4" /> <asp:BoundField DataField="Id" HeaderText="ID" /> <asp:BoundField DataField="Column2" HeaderText="Column2" /> <asp:BoundField DataField="Column3" HeaderText="Column3" /> <asp:BoundField DataField="Column4" HeaderText="Column4" /> <asp:BoundField DataField="Id" HeaderText="ID" /> <asp:BoundField DataField="Column2" HeaderText="Column2" /> <asp:BoundField DataField="Column3" HeaderText="Column3" /> <asp:BoundField DataField="Column4" HeaderText="Column4" /> <asp:BoundField DataField="Id" HeaderText="ID" /> <asp:BoundField DataField="Column2" HeaderText="Column2" /> <asp:BoundField DataField="Column3" HeaderText="Column3" /> <asp:BoundField DataField="Column4" HeaderText="Column4" /> <asp:BoundField DataField="Id" HeaderText="ID" /> <asp:BoundField DataField="Column2" HeaderText="Column2" /> <asp:BoundField DataField="Column3" HeaderText="Column3" /> <asp:BoundField DataField="Column4" HeaderText="Column4" /> </Columns> </asp:GridView> </div> </form> </body> </html>2. Add The Following css/* Div container to wrap the datagrid */div#div-datagrid {width: 500px;height:200px;overflow: auto;scrollbar-base-color:#ffeaff;}/* Locks the left column */td.locked, th.locked {font-size: 14px;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*/} /* Locks table header */th {font-size: 14px;font-weight: bold;text-align: center;background-color: navy;color: white;border-right: 1px solid silver;position:relative;cursor: default; top: expression(document.getElementById("div-datagrid").scrollTop-2); /*IE5+ only*/z-index: 10;}/* Keeps the header as the top most item. Important for top left item*/th.locked {z-index: 99;}/* DataGrid Item and AlternatingItem Style*/.GridRow {font-size: 10pt; color: black; font-family: Arial; background-color:#ffffff; height:35px;}.GridAltRow {font-size: 10pt; color: black; font-family: Arial; background-color:#eeeeee; height:35px;}CodeBehind.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class Default10 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["s"] != null) { Grd.DataSource = Session["s"] as DataTable; Grd.DataBind(); } else { Grd.DataSource = GetCustomMadeDataTable(); Grd.DataBind(); } } } public DataTable GetCustomMadeDataTable() { //Create a new DataTable object System.Data.DataTable objDataTable = new System.Data.DataTable(); //Create three columns with string as their type objDataTable.Columns.Add("Id", typeof(string)); objDataTable.Columns.Add("Column2", typeof(string)); objDataTable.Columns.Add("Column3", typeof(string)); objDataTable.Columns.Add("Column4", typeof(string)); objDataTable.Columns.Add("Column5", typeof(string)); //Adding some data in the rows of this DataTable objDataTable.Rows.Add(new string[] { "1", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "2", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "3", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "4", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "5", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "6", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "7", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "8", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "9", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "10", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "11", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "12", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "13", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "14", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "15", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "16", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "17", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "18", "R1C1 ", " Column3", "Test", "Test" }); objDataTable.Rows.Add(new string[] { "19", "R1C1 ", " Column3", "Test", "Test" }); DataColumn[] dcPk = new DataColumn[1]; dcPk[0] = objDataTable.Columns["Id"]; objDataTable.PrimaryKey = dcPk; Session["s"] = objDataTable; return objDataTable; } protected void Grd_RowDataBound(object sender, GridViewRowEventArgs e) { e.Row.Cells[0].CssClass = "locked"; e.Row.Cells[1].CssClass = "locked"; }}

ddff2004 2009-01-08

打赏
举报

我是过这个方法的，提示下标越界的，你把你完整的代码贴出来吧，调试进去可以看到的啊，绑定前columns.count是0，你那种方法明显会报错的

浮生若梦丶 2009-01-08

打赏
举报

要是不错呢？

ddff2004 2009-01-08

打赏
举报

楼上确定你的可以吗？在绑定前哪里来的列啊，明显会报错的

浮生若梦丶 2009-01-08

打赏
举报

哈哈，参照上面的例子给弄出来了，冻结的那列我设定的是白色，你自己根据你的改变下样式



页面上：

<style type="text/css">

.fixColleft1  

{ z-index:120; left:expression(this.offsetParent.scrollLeft); position:  relative; background:#fff} 

    .fixedHeader {overflow: auto;}

</style>



后台代码：你的gridview绑定数据的方法中

 /// <summary>

        /// gridview数据绑定

        /// </summary>

        private void StoreListBind(string strCondition)

        {

            SqlDataReader drStorage = back.getStoreList(Pager.PageSize, Pager.CurrentPageIndex, false, strCondition);

            if (drStorage != null)

            {

                DataTable dtStorage = tools.ConvertDataReaderToDataTable(drStorage);

                dtStorage.TableName = "EC_Web_StoreInfo";



                //主要是这里

                gdvStore.CssClass = "fixedHeader";

                this.gdvStore.Columns[0].HeaderStyle.CssClass = "fixColleft1";

                this.gdvStore.Columns[0].ItemStyle.CssClass = "fixColleft1"; 



                this.gdvStore.DataSource = dtStorage.DefaultView;

                gdvStore.DataBind();

            }

        }

ddff2004 2009-01-08

打赏
举报

To:wf5360308
冷月孤峰

你的方法之前已经试过了，没有用，提示下标越界，我确定是有数据的，而且也是按照它那个方法来做的

无爱大叔 2009-01-08

打赏
举报

<html>
<head>
<title>Locked Column Solution</title>
<link rel="stylesheet" href="locked-column.css" type="text/css">

<meta name="keywords" content="freeze HTML table columns; lock columns; freeze columns; CSS column locking; prevent column scroll; fixed column; fixed table header; lock header; freeze header">

<style>
div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: #99ccff;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked {
FONT-SIZE: 14px;
BACKGROUND-IMAGE: url(tr_h_bg.gif); LETTER-SPACING: 2px
text-align: center;
background-color: #99ccff;

border-right: 1px solid silver;
position:relative;
cursor: default;
}

thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
FONT-SIZE: 20px;
font-weight:normal;
}

thead th.locked {z-index: 30;}

td.locked, th.locked{
background-color: #99ccff;

border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}
</style>
</head>
<body>
<div id="tbl-container">
<table id="tbl">
<thead>
<tr>
<th height="55" class="locked" width=100>Name</th>
<th width=100>Major</th>
<th width=100>Sex</th>
<th width=100>English</th>
<th width=100>Japanese</th>
<th width=100>Math</th>
<th width=100>Geometry</th>
</tr>
</thead>
<tbody>
<tr>
<td class="locked">Name01</td>
<td>lang</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>
</tr>
<tr>
<td class="locked">Name02</td>
<td>math</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name03</td>
<td>lang</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name04</td>
<td>lang</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name05</td>
<td>lang</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td class="locked">Name06</td>
<td>math</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td class="locked">Name07</td>
<td>math</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name08</td>
<td>lang</td>
<td>male</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name09</td>
<td>math</td>
<td>male</td>
<td>80</td>
<td>50</td>
<td>65</td>
<td>65</td>
</tr>
<tr>
<td class="locked">Name10</td>
<td>lang</td>
<td>male</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td class="locked">Name11</td>
<td>lang</td>
<td>male</td>
<td>86</td>
<td>85</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td class="locked">Name12</td>
<td>math</td>
<td>female</td>
<td>100</td>
<td>75</td>
<td>70</td>
<td>70</td>
</tr>
<tr>
<td class="locked">Name13</td>
<td>lang</td>
<td>female</td>
<td>100</td>
<td>80</td>
<td>100</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name14</td>
<td>lang</td>
<td>female</td>
<td>50</td>
<td>45</td>
<td>55</td>
<td>55</td>
</tr>
<tr>
<td class="locked">Name15</td>
<td>lang</td>
<td>male</td>
<td>95</td>
<td>35</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td class="locked">Name16</td>
<td>lang</td>
<td>female</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>30</td>
</tr>
<tr>
<td class="locked">Name17</td>
<td>lang</td>
<td>female</td>
<td>80</td>
<td>100</td>
<td>55</td>
<td>95</td>
</tr>
<tr>
<td class="locked">Name18</td>
<td>math</td>
<td>male</td>
<td>30</td>
<td>49</td>
<td>55</td>
<td>85</td>
</tr>
<tr>
<td class="locked">Name19</td>
<td>lang</td>
<td>male</td>
<td>68</td>
<td>90</td>
<td>88</td>
<td>88</td>
</tr>
<tr>
<td class="locked">Name20</td>
<td>math</td>
<td>male</td>
<td>40</td>
<td>45</td>
<td>40</td>
<td>90</td>
</tr>
<tr>
<td class="locked">Name21</td>
<td>lang</td>
<td>male</td>
<td>10</td>
<td>15</td>
<td>100</td>
<td>60</td>
</tr>
<tr>
<td class="locked">Name22</td>
<td>math</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>80</td>
</tr>
<tr>
<td class="locked">Name23</td>
<td>lang</td>
<td>female</td>
<td>85</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>