鎖定GridView行列（1.css方法：IE6,7 2.js:推薦)

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一種：使用expression(IE6,7,不支援ie8以上，及firefox等）

第二種：使用javascript,最完美的解決辦法，需要下載指令碼（推薦）

第一種：

demo

   1:   <style>

   2:          .Freezing

   3:          {

   4:              position: relative;

   5:              table-layout: fixed;

   6:              top: expression(this.offsetParent.scrollTop);

   7:              z-index:10;

   8:          }

9:

  10:          .Freezing th

  11:          {

  12:              text-overflow: ellipsis;

  13:              overflow: hidden;

  14:              white-space: nowrap;

  15:              padding: 2px;

  16:          }

  17:          .FreezingLeft

  18:          {

  19:              position: relative;

  20:              left: expression(this.parentElement.offsetParent.scrollLeft);

  21:          }

  22:             .FreezingLefti

  23:          {

  24:              position: relative;

  25:              left: expression(this.parentElement.parentElement.parentElement.offsetParent.scrollLeft-1);

  26:          }

27:

  28:      </style>

GridView放在Div中

   1:  <div style="overflow: auto; height: 200px; width: 300px">

   2:          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"

   3:              BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black"

   4:              GridLines="Vertical" Width="400">

   5:              <AlternatingRowStyle BackColor="White" />

   6:              <Columns>

   7:                  <asp:BoundField DataField="id" HeaderText="id">

   8:                      <HeaderStyle CssClass="FreezingLeft" />

   9:                      <ItemStyle CssClass="FreezingLefti" />

  10:                  </asp:BoundField>

  11:                  <asp:BoundField DataField="firstname" HeaderText="firstname"/>

  12:                  <asp:BoundField DataField="lastname" HeaderText="lastname"/>

  13:              </Columns>

  14:              <FooterStyle BackColor="#CCCC99" />

  15:              <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" CssClass="Freezing" />

  16:              <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />

  17:              <RowStyle BackColor="#F7F7DE" />

  18:              <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />

  19:              <SortedAscendingCellStyle BackColor="#FBFBF2" />

  20:              <SortedAscendingHeaderStyle BackColor="#848384" />

  21:              <SortedDescendingCellStyle BackColor="#EAEAD3" />

  22:              <SortedDescendingHeaderStyle BackColor="#575357" />

  23:          </asp:GridView>

  24:      </div>

後台：

   1:    public class model

   2:      {

   3:          public string id { get; set; }

   4:          public string firstname { get; set; }

   5:          public string lastname { get; set; }

   6:      }

   1:  protected void Page_Load(object sender, EventArgs e)

   2:          {

3:

   4:              GridView1.DataSource = InitList();

   5:              GridView1.DataBind();

   6:          }

   7:          model m = new model();

   8:          List<model> l=new List<model>();

   9:          public List<model> InitList()

  10:          {

  11:              for (int i = 0; i < 20; i++)

  12:              {

  13:                  m = new model();

  14:                  m.id = i.ToString();

  15:                  m.firstname = "firstname" + i;

  16:                  m.lastname = "lastname" + i;

  17:                  l.Add(m);

  18:              }

  19:              return l;

  20:          }

如果您使用IE8以上的瀏覽器，因為IE8棄用了expression,所以要刪除頁面上面的一行代碼：

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

第二種，javascript指令碼實現：下載Demo如果在套用模板頁的頁面中使用，gridview的id會變,則需要將gridview的設定為 ClientIDMode="Static" 或用其他方法。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More