zoukankan      html  css  js  c++  java
  • 用CSS样式来实现DataGrid、GridView控件表头固定、指定列固定

    固定表头:

    第一步:在程序中添加css代码,既可以保存为单独的文件,也可以在页面中引用。

    Css代码如下:

    .Fixed

    {

     position:relative;

     table-layout:fixed;

     z-index:10;

     top:expression(this.offsetParent.scrollTop);  

    }

    .Fixed th

    {

      text-overflow:ellipsis;

      overflow:hidden;

      white-space:nowrap;

      padding:2px;

    }

    第二步:在##.aspx.cs文件后台Page_Load引用Css代码(也可以在##.aspx文件的head标签中引用,这里不做介绍)

    代码如下:

    //-----(((((子页面中引用css   

    HtmlLink CssControl = new HtmlLink();

    CssControl.Href = "~/Css/Style.css"; //指定路径

    CssControl.Attributes.Add("rel", "stylesheet");

    Page.Header.Controls.Add(CssControl);

    CssControl.Attributes.Add("type", "text/css");

    //-----)))))

    第三步:在##.aspx文件的DATAGRID(GRIDVIEW)控件中引用

    代码如下:

    <div style="overflow-y:scroll; 900px; height:300px" id="dvbody">

    <asp:DataGrid ID="DataGrid1" runat="server">

    <Columns>

    </Columns>

    <HeaderStyle … CssClass="Fixed"/>

    </asp:DataGrid>

     </div>

    注:overflow-y:scroll为竖向滚动条显示,因为要固定表头,一般情况下要指定固定高度。

    在DATAGRID(GRIDVIEW)表头样式中引用Css(CssClass="Fixed")。

    第四步:在页面的<head>标签中引用如下代码。(如果使用母板页则可以在母板页添加)

    代码如下:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    注:这行代码的含义是在IE8中以IE7的显示模式来进行渲染。

    固定指定列:

    第一步:在程序中添加css代码,既可以保存为单独的文件,也可以在页面中引用。

    Css代码如下:

    .FixCol

    {

       position: relative;

       table-layout:fixed;

       z-index:10;

       left: expression(this.offsetParent.scrollLeft);

    }

    第二步:在##.aspx.cs文件后台Page_Load引用Css代码(也可以在##.aspx文件的head标签中引用,这里不做介绍)

    代码如下:

    //-----(((((子页面中引用css   

    HtmlLink CssControl = new HtmlLink();

    CssControl.Href = "~/Css/Style.css"; //指定路径

    CssControl.Attributes.Add("rel", "stylesheet");

    Page.Header.Controls.Add(CssControl);

    CssControl.Attributes.Add("type", "text/css");

    //-----)))))

    第三步:在##.aspx文件的DATAGRID(GRIDVIEW)控件中引用

    代码如下:

    <div style="overflow-x:scroll; 900px; height:auto;" id="dvbody">

    <asp:DataGrid ID="DataGrid1" runat="server">

    <Columns>

    <asp:BoundColumn DataField="" HeaderText="" ReadOnly="True">

    <HeaderStyle CssClass="FixCol" />

    <ItemStyle CssClass="FixCol" />

    </asp:BoundColumn>

    </Columns>

    </asp:DataGrid>

     </div>

    注:overflow-x:scroll为横向滚动条显示,因为要固定指定的列,一般情况下要指定固定宽度。

    在DATAGRID(GRIDVIEW)列的样式中引用Css(CssClass="FixCol ")。

    第四步:在页面的<head>标签中引用如下代码。(如果使用母板页则可以在母板页添加)

    代码如下:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    注:这行代码的含义是在IE8中以IE7的显示模式来进行渲染。

    注:这里只是指定了一种方法,具体实现过程中,需要根据实际情况进行细微调整。

  • 相关阅读:
    window.parent 、window.top及window.self 详解
    js中的变量提升和函数提升
    IE不支持ES6语法的解决方案——Babel
    JavaScript 文件拖拽上传插件 dropzone.js 介绍
    C# DataTable 增加行与列
    group by 与 order by 一起使用的时候
    window.open传递多个参数
    Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
    ASP.NET中调用百度地图API
    C# 读取Excel中的数据到DataTable中
  • 原文地址:https://www.cnblogs.com/52net/p/2521297.html
Copyright © 2011-2022 走看看