Gridview实现冻结列

时间:2022-09-09 08:04:56

Gridview实现冻结列:数据的列比较多,想把首列固定下来,让其它的列可以实现左右滚动
实现:在gridview外面套一个带有滚动条的div
页面上定义css样式:
.freeze
    { z-index:120; left:expression(this.offsetParent.scrollLeft); position:relative;border:1px solid;border-bottom:0;border-right:0}   
    .freezeHeader_bg{background:#859FD4}
.freezeItem_bg{background:#fff}

后台代码里:
/// <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";

                //冻结列加载样式
                this.gdvStore.Columns[0].HeaderStyle.CssClass = "freeze freezeHeader_bg";
                this.gdvStore.Columns[0].ItemStyle.CssClass = "freeze freezeItem_bg";

                this.gdvStore.DataSource = dtStorage.DefaultView;
                gdvStore.DataBind();
            }
        }

运行效果:这是滚动前,注意比较第一列和后面的列

Gridview实现冻结列

 

滚动条滚动:对了,我的gridview是放在一个有滚动条的div里面

Gridview实现冻结列