Question

在剑道ui网格中，我该如何更改背景颜色？我已经尝试为列设置模板，但是当网格可视化时，它没有任何颜色是空的。我有这段代码：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
              { field: "Colore", title: "Colore", width: "160px", template: "<div><span style='background-color:red'></span></div>" }
             ]

};

如何应用模板为单元格的背景着色

Answer 1

您的代码基本上没问题。您可以按照但进行操作，因为span和div为空，因此元素的宽度为0px看不到它。

尝试做：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
        { 
            field: "Colore", 
            title: "Colore", 
            width: "160px", 
            template: "<div><span style='background-color:red'>This is a test</span></div>" 
        }
    ]
};

或

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
        { 
            field: "Colore", 
            title: "Colore", 
            width: "160px", 
            template: "<div style='background-color:red'>&nbsp;</div>"
        }
    ]
};

甚至：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
        { 
            field: "Colore", 
            title: "Colore", 
            width: "160px", 
            template: "<span style='float: left; width: 100%; background-color:red'>&nbsp;</div>"
        }
    ]
};

请务必注意span和/或div的内容不为空：它们包含 。

但是如果你想让它着色而没有填充/边距，那么你可以使用：

{ 
    field: "Colore", 
    title: "Colore", 
    width: "160px", 
    attributes: {
        style: "background-color: red"
    }
}

Answer 2

如何添加条件细胞背景？

它的作用是从所有参数构建文本行模板。如果没有给出行模板。可以在大多数参数中添加模板文本，例如：

...
//},
    columns : [  
            {
                title : 'Questions Translated',
                attributes:{ 'style':"#=questions!==questionsMax?'background-color: red; color:white;':''#" },
                field : "questions",
                width: 140
            },

...

Answer 3

如果要为整列着色，可以在列规范中添加attributes属性。

例如：

columns: [
    { 
        field: "Colore", 
        title: "Colore", 
        width: "160px", 
        attributes: {
            "class": "weekend"
        }
    }
]

在.css文件中，您将周末类指定为：

.weekend{
    background-color: #F7DCAA;
}

更多信息here

Answer 4

例如，您可以使用[footerStyle]和[headerStyle]属性更改网格颜色

 <kendo-grid [data]="gridData">
        <kendo-grid-column
          field="ContactName"
          title="Contact Name"
          [width]="150"
          [headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
          [style]="{'background-color': '#888','color': '#fff'}"
          [footerStyle]="{'background-color': '#888','color': '#fff'}"
        >
          <ng-template kendoGridFooterTemplate>Contacts: 10</ng-template>
        </kendo-grid-column>
        <kendo-grid-column
          field="CompanyName"
          title="Company Name"
          [headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
        >
        </kendo-grid-column>
        <kendo-grid-column
          field="City"
          title="City"
          [headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
        >
        </kendo-grid-column>
    </kendo-grid>

Kendo UI网格单元格背景颜色

4 个答案: