Question

我想在网格中有3行，然后是一条较粗的线，将第3行与第4行分开，然后是3行，然后是将第6行与第7行分开的较粗的线等等。

这样做的最佳方式是什么？

即

Row 1
Row 2
Row 3
-------------
Row 4
Row 5
Row 6
-------------

Answer 1

这样的事情应该有效。

Codebehind：

private int RowCount { get; set; }

protected void myGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    switch(e.Row.RowType)
    {
        case DataControLRowType.Header:
            {
                RowCount = 0;
            }
            break;
        case DataControlRowType.DataRow:
            {
                RowCount += 1;
                if (RowCount == 3)
                {
                    e.Row.CssClass = "BorderRow";
                    RowCount = 0;
                }
            }
            break;
    }
}

的CSS：

tr.BorderRow td { border-bottom: 3px solid #000000; }

Answer 2

根据chprpipr的回答，这是一个使用modulo和e.Row.RowIndex的更紧凑的解决方案：

if (e.Row.RowType = DataControlRowType.DataRow)
{
    if ((e.Row.RowIndex + 1) % 3 == 0)
    {
        e.Row.CssClass = "BorderRow";
    }
}

替换＆＃39;％3＆＃39;与＆＃39;％5＆＃39;例如，您将每5行而不是3行添加BorderRow CSS类。

Answer 3

这是一个jQuery示例：

$(document).ready(function() {
    $("table.MarkRows tr:nth-child(3)").addClass("BorderRow");
});

假设您拥有我在.NET解决方案中概述的CSS规则，每个<table class="MarkRows">或<asp:GridView CssClass="MarkRows" />都应该有效。

ASP.NET GridView控件中每3行都有粗网格线？

3 个答案: