关于gridview表头固定

最新推荐文章于 2019-02-21 17:37:00 发布

li12403074

最新推荐文章于 2019-02-21 17:37:00 发布

阅读量578

点赞数

文章标签： border javascript table div server asp

本文链接：https://blog.csdn.net/li12403074/article/details/6338767

版权

1.html内容

2.JavaScript方法：

对象gridview表头复制

grdID: 对象gridview ID

headOfGrdID: 复制表头容器ID

resultDiv：滚动条作用范围容器(div)ID

function fix005HeaderOfGridView (grdID, headOfGrdID, resultDiv) {

            var obj_GridView = document.getElementById(grdID);
            var obj_HeaderOfGridView = document.getElementById(headOfGrdID);
            var obj_DivOfGridView = document.getElementById(resultDiv);
            if (obj_GridView.rows.length > 1) {
                var widthOfGridView = obj_GridView.offsetWidth;

                obj_HeaderOfGridView.childNodes[0].width = widthOfGridView;

                var newHeaderRow = obj_HeaderOfGridView.childNodes[0].childNodes[0].childNodes[0];

                var headerRow = obj_GridView.rows[0].cloneNode(true);

                newHeaderRow.parentNode.replaceChild(headerRow, newHeaderRow);

                newHeaderRow = obj_HeaderOfGridView.childNodes[0].childNodes[0].childNodes[0];

                for (var index = 0; index < obj_GridView.rows[0].cells.length; index++) {

                    var headerCell = obj_GridView.rows[0].cells[index];
                    var cell_HeaderCopied = newHeaderRow.cells[index];

                    var vWidth = headerCell.clientWidth;

                    var paddingOfHeader = parseInt(headerCell.currentStyle.paddingLeft) + parseInt(headerCell.currentStyle.paddingRight);

                    cell_HeaderCopied.style.width = vWidth - paddingOfHeader;

                }
                obj_HeaderOfGridView.childNodes[0].style.tableLayout = "fixed";
                obj_HeaderOfGridView.style.display = "block";
                //     obj_DivOfGridView.style.height = "560px"; //obj_DivOfGridView.clientHeight;
            }
        }

gridview 容器滚动条事件处理

headOfGrdID：表头容器ID

resultDiv：滚动条控制范围容器ID

function on005GridScroll (headOfGrdID, resultDiv) {
            var tbHeaderObj = document.getElementById(headOfGrdID);
            var divObj = document.getElementById(resultDiv);

            var LeftOfHeaderTable = tbHeaderObj.offsetLeft;
            var TopOfHeaderTable = tbHeaderObj.offsetTop;

            tbHeaderObj.childNodes[0].style.left = 0 - divObj.scrollLeft;
            tbHeaderObj.style.top = 132;//表头容器显示绝对位置
            tbHeaderObj.style.left = 1;//表头容器显示绝对位置
        }

3.调用方法

在web页面对应的CS中调用JavaScript方法fix005HeaderOfGridView

例如：

grdHoZon.DataSource = dtList;
grdHoZon.DataBind();

//在gridview数据绑定结束后调用复制表头方法
ScriptManager.RegisterStartupScript(this, this.GetType(), "fix005HeaderOfGridView", "fix005HeaderOfGridView(' grdDetail',' headerOfGridView',' resultDiv'); ", true);

li12403074

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于gridview表头固定

<br />1.html内容<br /><html><br /><head><br /><title>表头固定</title><br /></head><br /><body><br /><id="form1" runat="server"><br /><div id="resultDiv" style="width: 100%; height: 560px; overflow: auto; margin-top: 10px;<br /> z-index: 10
复制链接

扫一扫