2015-10-07 91 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

相关问题