2015-10-07 87 views
0

我需要凍結列0,1同時我想要的行(不是頭,隱藏的頭)0,1,2凍結以及當用戶滾動上下滾動,也滾動從左到右這些列和行將靜態在那裏,我嘗試了一些jQuery代碼,但它沒有工作,我發現這個CSS例子在一個堆棧溢出問題,我把它用於我的項目。到目前爲止,我只和列一起工作,以儘快完成這個任務,但是我還需要像鎖定行之前所說的那樣。Gridview ASP.NET鎖第一列和第一行

我有一個GridView ASP.NET C#內部的HTML表格,在事件「加載頁面」的網格獲取數據表信息。這個Datable從SQL數據庫獲取信息。

我在網格上應用CSS時,事件觸發,所有這些工作正常!

爲了給你一個想法網格的樣子,你在這裏有一個例子:

enter image description here

你看不到的水平滾動條,因爲歲月的量用戶選擇,但是這可以根據他的選擇而改變。

這是我最近使用的CSS:

.pinned 
{ 
    position:fixed; 
    background-color: #FFFFFF; 
    z-index: 100; 


} 
.scrolled 
{ 
    position: relative; 
    left: 150px; 
    overflow: hidden; 
    white-space: nowrap; 
    min-width: 50px; 
} 
.col1 
{ 
    left: 0px; 
    width: 50px; 
} 
.col2 

{ 
    left: 50px; 
    width: 100px; 
} 

HTML:

 <div style="overflow:scroll; height: 400px; width: 911px; margin:auto;"> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" GridLines="Vertical" OnRowCreated="COl" OnRowDataBound="ROWCSS" ShowHeader="false"> 

</asp:GridView> 
</div> 

此C#代碼,當rowcreated事件觸發:然後我COLSPAN頭(第一3行-0 ,1,2)

當的RowDataBound火災:然後我應用CSS字體和背景顏色:

 protected void ROWCSS(object sender, GridViewRowEventArgs e) 
    { 
     int i = e.Row.Cells.Count; 
     int index = e.Row.RowIndex; 



     if (e.Row.RowType == DataControlRowType.DataRow) 
     { 

//THIS IS THE FOR, THAT LOCKS THE COLUMN 0 and 1 ************ 

      for (int j = 0; j <= (i - 1); j++) 
      { 

       if (j == 0) 
       { 
        e.Row.Cells[j].CssClass = "pinned col1"; 
       } 
       else if (j == 1) 
       { 
        e.Row.Cells[j].CssClass = "pinned col2"; 
       } 

       else 
       { 
        e.Row.Cells[j].CssClass = "scrolled"; 
       } 

      } 

//******************************** 


      if (index == 3 || index == 32 || index == 46 || index == 50) 
      { 
       for (int j = 0; j <= (i - 1); j++) 
       { 
        //Si la columna es la 0 o la 1, entonces aplicar formato izquierdo 
        if (j == 0 || j == 1) 
        { 
         e.Row.Cells[j].CssClass = "naranjaCSSLEFT"; 
        } 
        //En caso contrario, formato derecho 
        else 
        { 
         e.Row.Cells[j].CssClass = "naranjaCSSRIGHT"; 
        } 

       } 
      } 

      else if (index == 4 || index == 15 || index == 29 || index == 33 || index == 41) 
      { 
       for (int j = 0; j <= (i - 1); j++) 
       { 
        //Si la columna es la 0 o la 1, entonces aplicar formato izquierdo 
        if (j == 0 || j == 1) 
        { 
         e.Row.Cells[j].CssClass = "azulCSSLEFT"; 
        } 
        //En caso contrario, formato derecho 
        else 
        { 
         e.Row.Cells[j].CssClass = "azulCSSRIGHT"; 
        } 

       } 
      } 

      else if (!(index == 0 || index == 1 || index == 2)) 
      { 
       for (int j = 0; j <= (i - 1); j++) 
       { 
        //Si la columna es la 0 o la 1, entonces aplicar formato izquierdo 
        if (j == 0 || j == 1) 
        { 
         e.Row.Cells[j].CssClass = "negroCSSLEFT"; 
        } 
        //En caso contrario, formato derecho 
        else 
        { 
         e.Row.Cells[j].CssClass = "negroCSSRIGHT"; 
        } 

       } 
      } 



     } 
    } 

最後,這是一些我用彩色字體和背景(不知道這是需要提供)的CSS:

    .naranjaCSSLEFT 
      { 
      font-weight:bold; 
      color:#C65911; 
      font-size: 13px; 
      text-align:left; 
      font-family:tahoma; 
      } 
      .naranjaCSSRIGHT 
      { 
      font-weight:bold; 
      color:#C65911; 
      font-size: 13px; 
      text-align:right; 
      font-family:tahoma; 
      } 

      .azulCSSLEFT 
      { 
      font-weight:bold; 
      color:#2F75B5; 
      font-size: 13px; 
      text-align:left; 
      font-family:tahoma; 
      } 
      .azulCSSRIGHT 
      { 
      font-weight:bold; 
      color:#2F75B5; 
      font-size: 13px; 
      text-align:right; 
      font-family:tahoma; 
      } 
      .negroCSSLEFT 
      { 
      font-weight:normal; 
      color:#000000; 
      font-size: 13px; 
      text-align:left; 
      font-family:tahoma; 
      } 
      .negroCSSRIGHT 
      { 
      font-weight:normal ; 
      color:#000000; 
      font-size: 13px; 
      text-align:right; 
      font-family:tahoma; 

      } 

      .FILACSS 
      { 
      font-weight:bold ; 
      color:#FFFFFF; 
      font-size: 13px; 
      text-align:center; 
      font-family:tahoma; 
      background:#2F75B5; 
      border:hidden; 
      } 

如果你想知道我是什麼應用此之後,得到的是這樣的:

After css effects

它看起來:搞砸了!第3排......不知道發生了什麼事。該colspan應用於不同的事件。

,如果你想知道的合併單元格Rowcreated事件是什麼,是這樣的:

 protected void COl(object sender, GridViewRowEventArgs e) 
    { 
     int index = e.Row.RowIndex; 
     int i = e.Row.Cells.Count; 

     if (i == 4) 
     { 

      if (index == 0) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        //e.Row.Cells[j].CssClass = "GVFixedHeader"; 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 
       // e.Row.Cells[2].Text = "ACUMULADO DE ENERO - " + NomMes; 

       e.Row.Cells[2].ColumnSpan = 2; 
       e.Row.Cells.RemoveAt(3); 
      } 

      if (index == 1) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

      } 

      if (index == 2) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

      } 



     } 
     if (i == 8) 
     { 
      if (index == 0) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        //e.Row.Cells[j].CssClass = "FILACSS"; 
        e.Row.Cells[j].CssClass = "FILACSS"; 

       } 

       //******************************* 
       //e.Row.Cells[0].Text = "ACUMULADO DE ENERO - " + NomMes; 
       e.Row.Cells[2].ColumnSpan = 6; 

       for (int b = 7; b >= 3; b--) 
       { 
        e.Row.Cells.RemoveAt(b); 
       } 


      } 

      if (index == 1) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        //e.Row.Cells[j].CssClass = "FILACSS"; 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

       //****************************** 
       for (int b = 2; b <= 6; b++) 
       { 
        e.Row.Cells[b].ColumnSpan = 2; 
        b++; 
       } 

       for (int b = 7; b >= 3; b--) 
       { 
        e.Row.Cells.RemoveAt(b); 
        b--; 
       } 


      } 

      if (index == 2) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        //e.Row.Cells[j].CssClass = "FILACSS"; 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

      } 
     } 
     if (i == 10) 
     { 

      if (index == 0) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

       //******************************* 
       //e.Row.Cells[2].Text = "ACUMULADO DE ENERO - " + NomMes; 
       e.Row.Cells[2].ColumnSpan = 8; 

       for (int b = 9; b >= 3; b--) 
       { 
        e.Row.Cells.RemoveAt(b); 
       } 


      } 

      if (index == 1) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

       //****************************** 
       for (int b = 2; b <= 8; b++) 
       { 
        e.Row.Cells[b].ColumnSpan = 2; 
        b++; 
       } 

       for (int b = 9; b >= 3; b--) 
       { 
        e.Row.Cells.RemoveAt(b); 
        b--; 
       } 


      } 

      if (index == 2) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

      } 

     } 

     if (i == 12) 
     { 
      if (index == 0) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

       //******************************* 
       //e.Row.Cells[2].Text = "ACUMULADO DE ENERO - " + NomMes; 
       e.Row.Cells[2].ColumnSpan = 10; 

       for (int b = 11; b >= 3; b--) 
       { 
        e.Row.Cells.RemoveAt(b); 
       } 


      } 

      if (index == 1) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

       //****************************** 
       for (int b = 2; b <= 10; b++) 
       { 
        e.Row.Cells[b].ColumnSpan = 2; 
        b++; 
       } 

       for (int b = 11; b >= 3; b--) 
       { 
        e.Row.Cells.RemoveAt(b); 
        b--; 
       } 


      } 

      if (index == 2) 
      { 
       for (int j = 2; j <= (i - 1); j++) 
       { 
        e.Row.Cells[j].CssClass = "FILACSS"; 
       } 

      } 
     } 
    } 

列不漸凍呢。

回答

0

我一直在這個昨晚工作,我發現了列0和1的解決方案,但我仍然想凍結第一行(0,1,2)。我工作的這個例子凍結了標題,但正如我之前所說的,我將隱藏標題。

這是新的代碼,我申請:

HTML:

     <div> 
        <asp:GridView ID="cphMain_cphMain_cphMain_GridView2" runat="server" Width="100%" AutoGenerateColumns="true" GridLines="None" 
         OnRowCreated="COl" OnRowDataBound="ROWCSS"> 
        <RowStyle HorizontalAlign="Left" VerticalAlign="Middle" Wrap="False" /> 

       </asp:GridView> 
       <script type="text/javascript"> 
        $(document).ready(function() { 
         $('#cphMain_cphMain_cphMain_GridView2').gridviewScroll({ 
          width: 930, 
          height: 400, 
          freezesize: 2 
         }); 
        }); 
       </script> 
       </div> 

在 「頭」 一節,我把這些腳本地址:

HTML:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <script src="JQuery/GridViewHeader.js"></script> 

爲了提供CSS格式的網格,我使用了上面提到的相同的事件,CSS擴展除外:固定,col1,col2,滾動。

這不是不再使用:

//THIS IS THE FOR, THAT LOCKS THE COLUMN 0 and 1 ************ 

     for (int j = 0; j <= (i - 1); j++) 
     { 

      if (j == 0) 
      { 
       e.Row.Cells[j].CssClass = "pinned col1"; 
      } 
      else if (j == 1) 
      { 
       e.Row.Cells[j].CssClass = "pinned col2"; 
      } 

      else 
      { 
       e.Row.Cells[j].CssClass = "scrolled"; 
      } 

     } 

//******************************** 

如果你問什麼代碼裏面的:

<script src="JQuery/GridViewHeader.js"></script> 

可以檢查出在這裏(說實話我看不懂這個我只是發現它並複製粘貼):

http://gridviewscroll.aspcity.idv.tw/Scripts/gridviewScroll.min.js?20130319

我太k示例來自:

http://gridviewscroll.aspcity.idv.tw/Demo.aspx

相關問題