javascript - jsGrid - 样式背景组单元格

Question

我想更改两列（“姓名，年龄”）列的背景 => 蓝色背景。（“地址，国家”）列 => 红色背景。

谢谢。

我想用背景颜色填充的单元格。

 var clients = [
        { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
        { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
        { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
        { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
    ];
 
    var countries = [
        { Name: "", Id: 0 },
        { Name: "United States", Id: 1 },
        { Name: "Canada", Id: 2 },
        { Name: "United Kingdom", Id: 3 }
    ];
 
    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",
 
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
 
        data: clients,
 
        fields: [
            { name: "Name", type: "text", width: 150, validate: "required" },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
        ]
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>

标签： javascriptjsgrid

Answer 1

var clients = [{
    "Name": "Otto Clay",
    "Age": 25,
    "Country": 1,
    "Address": "Ap #897-1459 Quam Avenue",
    "Married": false
  },
  {
    "Name": "Connor Johnston",
    "Age": 45,
    "Country": 2,
    "Address": "Ap #370-4647 Dis Av.",
    "Married": true
  },
  {
    "Name": "Lacey Hess",
    "Age": 29,
    "Country": 3,
    "Address": "Ap #365-8835 Integer St.",
    "Married": false
  },
  {
    "Name": "Timothy Henson",
    "Age": 56,
    "Country": 1,
    "Address": "911-5143 Luctus Ave",
    "Married": true
  },
  {
    "Name": "Ramona Benton",
    "Age": 32,
    "Country": 3,
    "Address": "Ap #614-689 Vehicula Street",
    "Married": false
  }
];

var countries = [{
    Name: "",
    Id: 0
  },
  {
    Name: "United States",
    Id: 1
  },
  {
    Name: "Canada",
    Id: 2
  },
  {
    Name: "United Kingdom",
    Id: 3
  }
];

$("#jsGrid").jsGrid({
  width: "100%",
  height: "400px",

  inserting: true,
  editing: true,
  sorting: true,
  paging: true,

  data: clients,

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>

<style>
  .jsgrid-row>.jsgrid-cell.blue-cell {
    background-color: blue ;
    color:white
  }
  
  .jsgrid-row>.jsgrid-cell.red-cell {
    background-color: red ;
    color:white
  }
</style>

结果：