条件角度JS网格单元格着色

时间:2016-06-07 07:06:27

标签: javascript angularjs angular-ui-grid

我有一个UI网格,可以呈现记录列表。 输入模型类如下所示:

public class GroupMembershipUploadInput
{

    public string chpt_cd {get;set;}
    public string cnst_mstr_id {get;set;}
    public string cnst_prefix_nm {get;set;}
    public string grp_cd {get;set;}
    public string grp_nm {get;set;}

}

public class ListGroupMembershipUploadInput
{
    public List<GroupMembershipUploadInput> GroupMembershipUploadInputList { get; set; }
}

这个ListGroupMembershipUploadInput模型列表在返回成功的函数调用时在UI网格上呈现。

function getUploadValidationGridLayout(gridOptions, uiGridConstants, results) {
    gridOptions.data = '';
    gridOptions.data.length = 0;
    gridOptions.data = results;

    return gridOptions;
} 

Angular ColumnDefs和GridOptions类似于:

    getUploadValidationResultsColumnDef: function () {


        return [

            {
                field: 'chpt_cd', displayName: 'Chapter Code', width: "*", minWidth: 140, maxWidth: 900
            },
            {
                field: 'cnst_mstr_id', displayName: 'Master ID', enableCellEdit: false,
                cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                    if (grid.columns[0]) {
                        return 'first-col-style';
                    }
                }, width: "*", minWidth: 140, maxWidth: 900
            },
            { field: 'cnst_prefix_nm', headerTooltip: 'Prefix Name', displayName: 'Prefix Name', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>', width: "*", minWidth: 140, maxWidth: 900 },
            { field: 'grp_cd', displayName: 'Group Code', width: "*", minWidth: 140, maxWidth: 900 },
            { field: 'grp_nm', displayName: 'Group Name', width: "*", minWidth: 140, maxWidth: 900 }

        ]
    },

    getUploadValidationGridOptions: function (uiGridConstants, columnDefs) {

        var gridOptions = {
            enableRowSelection: true,
            enableRowHeaderSelection: true,
            enableFiltering: false,
            enableSelectAll: false,
            selectionRowHeaderWidth: 35,
            rowHeight: 45,
            multiSelect: false,

            paginationPageSize: 8,
            enablePagination: true,
            paginationPageSizes: [8],
            enablePaginationControls: false,
            enableVerticalScrollbar: 1,
            enableHorizontalScrollbar: 1,
            enableGridMenu: true,
            showGridFooter: false,
            columnDefs: columnDefs

        };
        gridOptions.data = '';
        return gridOptions;
    }
}

现在假设呈现的列表包含以下记录:

chpt_cd  cnst_mstr_id cnst_prefix_nm grp_cd grp_nm
-------  ------------ -------------- ------ ------
07038                 Hait           UVC    UVC_0301
07038                 Monac          SFFS   SFFS_201
06308                 Pom            DLF    DLF

还有两个额外的数据列表:包含有效的chpt_cd(07038)和有效的grp_cds(DLF)。

这些单元格中的所有其余数据(例如第三条记录中chpt_cd单元格中的06308 )和(第一行和第二行中grp_cd单元格中的UVC和SFFS < / strong>)必须突出显示红色。休息是正常的。

我该怎么办?使用 CellTemplate 或其他?

0 个答案:

没有答案