扩展gridview轻松实现冻结行和列

在实际的项目中,由于项目的需要,数据量比较大,同时显示栏位也比较多,要做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>

效果还是满不错的.