如何在Gijgo网格中以不同的方式为行设置不同的背景颜色?

时间:2016-04-14 10:46:30

标签: asp.net-mvc grid

我使用Gijgo网格来管理表格的数据。

我想设置不同行的背景颜色。颜色在模型中。

查看

       grid = $("#grid").grid({
        dataSource: { url: '@Url.Action("Method", "MyController")', success: onSuccessFunc },
        dataKey: "Id",
        uiLibrary: "bootstrap",
        columns:
        [
            { field: "Id", sortable: false, hidden: true },
            { field: "Name", sortable: false, hidden: true },
            { field: "Description", title: "Tipologia", sortable: false, width: "70%" },
            { field: "Value1", title: "Value 1", align: 'center', sortable: false },
            { field: "Value2", title: "Value 2", align: 'center', sortable: false },
            { field: "Edit", title: "", width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } }
        ]
    });

视图模型

public class ViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public double? Value1 { get; set; }
    public double? Value2 { get; set; }
    public string Group { get; set; }
    public string BackGroudColor { get; set; }
}

如何将网格行的属性背景颜色绑定到模型的backgroundcolor属性?

非常感谢。

查尔斯

1 个答案:

答案 0 :(得分:4)

最好的选择是使用gijgo网格的rowDataBound事件 您可以在http://gijgo.com/Grid/Events/rowDataBound

了解有关此活动的更多信息

示例1:

grid.on('rowDataBound', function (e, $row, id, record) {
    $row.css('background-color', id%2 === 0 ? '#FFFFFF' : '#CCCCCC');
});

示例2:

grid.on('rowDataBound', function (e, $row, id, record) {
    if (record.Name === 'something') {
        $row.css('background-color',  '#CCCCCC');
    }
});