jsGrid如何为指定列设置不同背景色：Name/Age蓝、Address/Country红

你可以通过给指定列绑定自定义CSS类的方式实现需求，步骤如下：

1. 新增自定义样式，用于控制两类列的背景色
   把下面的CSS代码放到页面的<style>标签中，或者你自己的CSS文件里即可，色值可以根据需求自行调整：

/* 蓝色背景类 */
.blue-column-bg {
    background-color: #add8e6 !important;
}
/* 红色背景类 */
.red-column-bg {
    background-color: #f08080 !important;
}

这里加!important是为了覆盖jsGrid默认的单元格样式，避免自定义样式不生效。

2. 修改jsGrid初始化的fields配置，给对应列绑定上面的CSS类
   修改后的字段配置如下：

fields: [
    { name: "Name", type: "text", width: 150, validate: "required", css: "blue-column-bg" },
    { name: "Age", type: "number", width: 50, css: "blue-column-bg" },
    { name: "Address", type: "text", width: 200, css: "red-column-bg" },
    { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name", css: "red-column-bg" },
]

如果你需要表头也同步显示对应背景色，只需要在列配置中再加headerCss属性，值和css属性一致即可，示例：
{ name: "Name", type: "text", width: 150, validate: "required", css: "blue-column-bg", headerCss: "blue-column-bg" }

内容的提问来源于stack exchange，提问作者Maor