c# - Gridview ASP.NET 锁定第一列和第一行

Question

我需要同时卡住列 0、1 我想要行(不是 HEADER，HEADER 是隐藏的)0、1、2 以及当用户向上和向下滚动以及从左向右滚动时卡住这些列和行在那里是静态的，我尝试了一些 jQuery 代码但没有用，我在 Stack Overflow 问题中找到了这个 CSS 示例，我将它用于我的元素。到目前为止，我只是使用列来尽快完成这项工作，但是我需要像我之前所说的那样锁定行。

我在 HTML 表中有一个 gridview ASP.NET C#，在“加载页面”事件中，网格会填充数据表信息。此数据表从 SQL 数据库获取信息。

我在事件触发时在网格上应用 CSS，所有这些工作正常!

为了让您了解网格的外观，这里有一个示例:

你看不到水平滚动条，因为用户选择了年数，但这可以根据他的选择而改变。

这是我最近使用的 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;
            }

如果你想知道应用后我得到了什么，那就是:

看起来:搞砸了!前 3 行……不知道发生了什么。 colspan 应用于不同的事件。

如果您想知道 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";
                }

            }
        }
    }

列尚未卡住。

Answer 1

昨晚我一直在研究这个问题，我找到了第 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> 

在“head”部分我放置了这些脚本地址:

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

我的例子来自:

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