Изменить цвет строки на основе значения столбца в строке

Question

У меня есть sqldatasource, который загружает данные с моего сервера и помещает их в сетку данных.

У меня есть столбец с именем clnumber, числа 1,2,3

Я хочу, чтобы каждая строка имела разный цвет в зависимости от того, какое число находится в этом столбце данных

Это код, который я использовал

 $(document).ready(function () {

    $("#<%=GridView1.UniqueID%> tr").each(function () {

        var number = $(this).children('td:eq(6)').text();

        if (number == 'OK') {
            $(this).children('td').css({ "background-color": "lightgreen" });

        }
    })
});

Answer 1

Если вы дали вашему gridview класс css с именем 'myGridView', вы можете сделать следующее:

$(document).ready(function () {

    $('.myGridView tr').each(function () {

        var number = $(this).children('td:eq(1)').text();

        if (number == '1') {
            $(this).children('td').css('background', 'red');
        }
    })
});

где 'td: eq (1)' относится ко второй ячейке в строке.Это, конечно, будет зависеть от того, какая ячейка в вашей строке содержит это магическое число.

Я уверен, что это не самое элегантное использование jQuery, но вы можете реорганизовать его по своему желанию

Answer 2

Если число, определяющее, какой цвет должен использоваться, фактически генерируется в выводе HTML, почему бы не использовать javascript?

Answer 3

Вы можете использовать похожие на это:

    /// <summary>
    /// Updates the row fore colour to show the line type
    /// </summary>
    /// <param name="sender">object</param>
    /// <param name="e">args</param>
    protected void gvLineValues_RowDataBound( object sender, GridViewRowEventArgs e )
    {
        try
        {
            //Format the row
            this.FormatRow( e );
        }
        catch ( Exception ex )
        {
            ErrorLogging.LogError( ex );
        }
    }

  /// <summary>
        /// Formats a gridview row
        /// </summary>
        /// <param name="e">Gridview event args</param>
        private void FormatRow( GridViewRowEventArgs e )
        {
            try
            {
                //Change the forecolor of the row
                if ( e.Row.RowType == DataControlRowType.DataRow )
                {
                    OrderLine oOrderLine = e.Row.DataItem as OrderLine;

                    if ( oOrderLine != null )
                    {
                        e.Row.ForeColor = oOrderLine.ForeColour;


                                //Check the line is over budget
                                if ( oOrderLine.OverBudget )
                                {
                                    e.Row.BackColor = ColourManager.OverBudgetItemBackColour;
                                    e.Row.ToolTip = String.Format( "Item over {0} and awaiting your approval", GlobalizationManager.Budget );
                                }
                                else
                                {
                                    e.Row.BackColor = ColourManager.WithinBudgetItemBackColour;
                                    e.Row.ToolTip = "Item awaiting your approval";
                                }
                            }
                        }

                        //Change the back colour of the row if its a deleted row
                        if ( oOrderLine.Deleted )
                        {
                            e.Row.Font.Strikeout = true;
                            e.Row.ToolTip = "This line has been deleted";
                        }
                    }
                }
            }
            catch ( Exception )
            {
                throw;
            }
        }

вы могли бы сделать что-то вроде

switch ( DataItem.ColorNumber )
{
case 1:

e.row.backcolor = Color.blue;

break;

case 2:

e.row.backcolor = Color.red;

break;

case 3:

e.row.backcolor = Color.white;

break;

}

Answer 4

На основании числа как?
Первый ряд белый, второй серый?

if(rownumber%2 == 0) //white
else //grey

или наоборот наоборот.