在实际的项目中,由于项目的需要,数据量比较大,同时显示栏位也比较多,要做gridview里显示完整,并做到用户体验比较好,这就需要冻结表头和关键列.由于用到的地方比较多,我们可以护展一个gridview,使其简单设置就能达到目的. 下面是我写的一个扩展gridview的一个工程和简单例子.主要的设置属性是红色框框内的.
下面,我们再看一下前台的文件设置, 这里要注意删掉<DOCTYPE type> 这一行,否则不起作用.
运行得到以下结果.红色线是冻结分界线,对照以下两张图片,可以看到效果.
没错,前台只需要这么简单的设置就可以了, 因为把CSS和JS的代码放到后台去构造了.实际上写在前台也是一样,但这样不方便后续使用.之所以写到后台,因为后续可封装这个类, 引用该类后只需设置一下属性就能轻松达到目的. 下面是CSS和JS的代码,如仍有不明白的地方.可以留言. 其实可以把这个gridview扩展更多的功能以便用到后续的项目中,(如增加分页,内容导出xls或pdf,还有checkbox之类全选的,或者右键菜单之类的，请看续编),以便达到代码少,设置简单,开发速度快的目的.
<script language=javascript>
function FreezeGridColumns(dgTbl, colNo)
{
var tbl = document.getElementById(dgTbl);
for ( var i=0; i<tbl.rows.length; i++)
{
for ( var j=0; j<colNo; j++)
{
tbl.rows[i].cells[j].className = 'locked';
}
}
}
</script>
<style TYPE='text/css'>
/* Locks table header */
th
{
/* border-right: 1px solid silver; */
position:relative;
cursor: default;
/*IE5+ only*/
top: expression(this.parentElement.offsetParent.offsetParent.scrollTop-2);
z-index: 10;
}
TR.GridNormal TH, TR.GridAlternate TH
{
text-align:left;
}
TR.GridHeader TH
{
text-align:center;
}
/* Locks the left column */
td.locked, th.locked
{
/* border-right: 1px solid silver; */
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(this.parentElement.offsetParent.offsetParent.scrollLeft-2);
}
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}
</style>
<style>
/*Overriding Grid Styles*/
.Grid
{
border:0;
background-color:red;
}
.GridHeader
{
background-color: #547095;
color:White;
font-weight:bold;
font-family:Tahoma;
text-align:center;
padding : 1px 0px 1px 0px;
font-size:8pt;
}
.GridHeader TD A, TH A
{
text-decoration:none;
color:White;
}
.GridNormal
{
background-color: #FFFFFF;
font-weight: normal;
font: x-small Verdana;
}
.GridAlternate
{
background-color: #EFF8FC;
font-weight: normal;
font: x-small Verdana;
}
.GridSelected
{
background-color: #FFC082;
font-weight: normal;
font: x-small Verdana;
}
.GridPager
{
background-color : White;
font-size : x-small;
}
</style>
<script language=javascript>
// trims the height of the div surrounding the results table
// so that if a not a lot of results are returned,
// you dont have a lot of blank space between the results and
// the last buttons on the page
var divTbl = document.getElementById('div_CustomDataGrid1');
var resultsTable = divTbl.children[0];
if ( typeof(resultsTable) != 'undefined' )
{
//alert( 'div ' + divTbl.offsetHeight + ' results: ' + resultsTable.offsetHeight );
if( divTbl.offsetHeight + 3 > resultsTable.offsetHeight )
divTbl.style.height = resultsTable.offsetHeight + 50;
}
</script>
<script language=javascript>
FreezeGridColumns('CustomDataGrid1',3);
</script>效果还是满不错的.