C# Gridview 固定表头及表尾

 

Gridview 固定表头表尾及宽度问题

 

1. 引用 <script src="../../cssjs/jquery-1.8.3.js"></script>   

2. 引用 GvHeader.js  ------ 本博客中有进行下载即可

https://download.csdn.net/download/yinlong2015/11138381

3.  <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#<%=GridView1.ClientID %>").Scrollable({
                ScrollHeight: 450,
                width: 500
            });
        })
    </script>

4.如果有表尾

    <%--表尾--%>
<style type="text/css">
     tr.hkBottomStyle { position:fixed;bottom:105px;height:30px;padding-left:0px; max-width: calc(100% - 17px);}
</style>

5.在gridview 上添加Div   <div  style=" height: 490px; overflow:auto; text-align: center;"> 设置高度及纵向滚轮

6.在gridview控件名为gridview1上设置固定宽度，固定宽度根据实际情况给即可

7. 如果有不规则宽度 比如 序号  设置对应的 表头宽度及表体ItemStyle 宽度  <HeaderStyle Width="30px" /> <ItemStyle HorizontalAlign="Center" Width="30px"/>

8. 后台 load 中!IsPostBack 内 添加   this.GridView1.Attributes.Add("style", "table-layout:fixed"); 

以上完成 gridview 固定表头，表尾及宽度变形等问题进行一套方案！

例图