jqgrid 带自定义行 colors

Question

I´m using dynamic data

<tr class="ui-widget-content jqgrow ui-row-ltr" role="row" id="1">...</tr>
<tr class="ui-widget-content jqgrow ui-row-ltr myAltRowClass" role="row" id="2"></tr>
<tr class="ui-widget-content jqgrow ui-row-ltr" role="row" id="3">...</tr>
<tr class="ui-widget-content jqgrow ui-row-ltr myAltRowClass" role="row" id="4"></tr>
<tr class="ui-widget-content jqgrow ui-row-ltr" role="row" id="5">...</tr>
<tr class="ui-widget-content jqgrow ui-row-ltr myAltRowClass" role="row" id="6"></tr>
<tr class="ui-widget-content jqgrow ui-row-ltr" role="row" id="7">...</tr>
<tr class="ui-widget-content jqgrow ui-row-ltr myAltRowClass" role="row" id="8"></tr>
<tr class="ui-widget-content jqgrow ui-row-ltr" role="row" id="9">...</tr>
<tr class="ui-widget-content jqgrow ui-row-ltr myAltRowClass" role="row" id="10"></tr>
<tr class="ui-widget-content jqgrow ui-row-ltr" role="row" id="11">...</tr>
<tr class="ui-widget-content jqgrow ui-row-ltr myAltRowClass" role="row" id="12"></tr>

The rows are mark with id from 1 to 12.

How can i color the row with id=11 and id=12 with maybe red?

This is a scoring board, and the two rows in the bottom marks that they will be sent down to lower premier league.

Answer 1

If you will always have a list of 12 teams in this table and want to highlight bottom two only then its easy to do via CSS. Just create a rule like

tr#11{ background-color:#fff100}

same for tr#12

However if you want it to be dynamic and want to have last two rows with relegate ID. Then you need to do following on server side or client side.

1. Get the length of array that contains teams
2. In your Iterator check when it has reached second last item by comparing current position with 2 less than the length
3. Give this tr a new class or if you cant replace the class attribute then add a new attribute like relegated="1" or something similar.
4. In CSS just use the selector or class to keep the new background-color.

You can also use DOM to navigate to last tr item in table and keep one previous item in a variable as well then use both items and add a style attribute to them with background colour.

There are several ways to achieve this. Depends on how you are getting your grid out and which way you feel comfortable as well as performance overheads.