表格某一行背景色变色

比如这种：

Conditional Formatting In Grid Rows

This sample demonstrates how to style rows depending on data item values.

Discontinued rows use grayed text. Rows with Units In Stock < 0 shows with a red background. Rows with Units In Stock < 20 shows with a orange background. Rows with Units In Stock > 50 are in italic. Unit price is colored depending on the price level being higher than 50, or lower than 20.

Coloring is done by adding CSS classes to row, by overriding getItemCssClass method.

在Grid里面编写：

namespace Serene1.BasicSamples {

    @Serenity.Decorators.registerClass()
    export class ConditionalFormattingGrid extends Serenity.EntityGrid<Northwind.ProductRow, any> {

        protected getColumnsKey() { return "Northwind.Product"; }
        protected getDialogType() { return <any>Northwind.ProductDialog; }
        protected getIdProperty() { return Northwind.ProductRow.idProperty; }
        protected getLocalTextPrefix() { return Northwind.ProductRow.localTextPrefix; }
        protected getService() { return Northwind.ProductService.baseUrl; }

        constructor(container: JQuery) {
            super(container);
        }

        /**
         * We override getColumns() to be able to add a custom CSS class to UnitPrice
         * We could also add this class in ProductColumns.cs but didn't want to modify
         * it solely for this sample.
         */
         //单独设置UnitPrice这一单元格的样式
        protected getColumns(): Slick.Column[] {
            var columns = super.getColumns();

            var fld = Northwind.ProductRow.Fields;

            // adding a specific css class to UnitPrice column, 
            // to be able to format cell with a different background
            Q.first(columns, x => x.field == fld.UnitPrice).cssClass += " col-unit-price";

            return columns;
        }


        /**
         * This method is called for all rows
         * @param item Data item for current row
         * @param index Index of the row in grid
         */
         //设置符合要求的某一行的样式
        protected getItemCssClass(item: Northwind.ProductRow, index: number): string {
            let klass: string = "";

            if (item.Discontinued == true)
                klass += " discontinued";
            else if (item.UnitsInStock <= 0)
                klass += " out-of-stock";
            else if (item.UnitsInStock < 20)
                klass += " critical-stock";
            else if (item.UnitsInStock > 50)
                klass += " needs-reorder";

            if (item.UnitPrice >= 50)
                klass += " high-price";
            else if (item.UnitPrice >= 20)
                klass += " medium-price";
            else
                klass += " low-price";

            return Q.trimToNull(klass);
        }
    }
}

在Content——site——slides——site.basicsamples.less中添加：

.s-BasicSamples-ConditionalFormattingGrid {
    .discontinued .slick-cell, .discontinued .slick-cell a {
        color: lightgray;
    }

    .out-of-stock .slick-cell, .out-of-stock .slick-cell a {
        background-color: #ffaaaa;
        color: red;
    }

    .critical-stock {
        background-color: #ffd5c0;

        .slick-cell, .slick-cell a {
            color: black;
        }
    }

    .much-stock {

        .slick-cell, .slick-cell a {
            font-style: italic;
        }
    }

    .high-price .col-unit-price {
        background-color: darkorchid;
        color: #fff;
    }

    .medium-price .col-unit-price {
        background-color: yellow;
        color: #000;
    }

    .low-price .col-unit-price {
        background-color: green;
        color: #fff;
    }
}

再在site.less中导入

@import "site.basicsamples.less";