如何更改ag-grid单元格的颜色以动态更改数据

4 回答

• 0

  你写的内容大多是正确的：

  function compareValues(params) {
  if (params.oldValue > params.newValue){ 
  return {color: 'green', backgroundColor: 'black'};
  console.log(params.newValue);
  
  }
  if (params.oldValue < params.newValue){ 
  return {color: 'red', backgroundColor: 'black'};
  }
  

  而且信息Jarod Moser给了你关于这个回调的params对象是重要的 .

  您遇到的问题是您正在尝试 return {style} 但是您不能这样做 . 您需要访问html元素（包含 <div> ）并在其上设置一个类（使用您想要的样式定义类） . 我已经在ag-grid中完成了这项工作，我可以访问 params.eGridCell 但在此特定回调中，eGridCell不可用 . 如果我找到了一个很好的方法来到 <div> 我将用我发现的内容编辑这篇文章 .

  EDIT - Additional Information

  我不认为我会使用newValueHandler来做你想做的事情 .

  您没有说明如何更新数据，但您确实说它可能每5秒更新一次 .

  但是，您决定更新单元格，可以向rowData对象添加属性'origValue'，在更新单元格值之前，将当前值设置为'origValue'，然后将新值设置为value . 那么......您可以使用 cellClass 列属性，使用回调函数，并将新值与'origValue'进行比较并返回所需的样式 .

  文档中的示例：

  // return class based on function
  var colDef3 = {
      name: 'Function Returns String',
      field' 'field3',
      cellClass: function(params) { return (params.value==='something'?'my-class-1':'my-class-2'); }
  }
  
  
  // return array of classes based on function
  var colDef4 = {
      name: 'Function Returns Array',
      field' 'field4',
      cellClass: function(params) { return ['my-class-1','my-class-2']; }
  }
  

  cellClass的params对象可以访问行数据，并且能够比较new和orig值 .

  一旦你开始挖掘，有很多选择 . 选择你认为最好的 .

  回复于 2024-04-26T06:08:32+08:00
• 1

  看起来你应该能够使用newValueHandler这是每列的属性 .

  来自文档：

  如果要使用简单文本编辑，但希望在插入行之前以某种方式格式化结果，则可以向列提供newValueHandler . 这将允许您向值添加其他验证或对话 . newValueHandler提供了一个带有属性的params对象：node：有问题的网格节点 . data：有问题的行数据 . oldValue：如果'field'在列定义中，则包含编辑前数据中的值 . newValue：输入默认编辑器的字符串值 . rowIndex：虚拟化行的索引 . colDef：列定义 . context：gridOptions中设置的上下文 . api：对ag-Grid API的引用 .

  所以有些东西：

  var colDefs = [{
      header: 'comparing to previous val'
      newValueHandler: compareValues
  }]
  
  function compareValues(params){
      if (params.oldValue > params.newValue){ //make it red}
      if (params.oldValue < params.newValue){ //make it green}
  }
  

  回复于 2024-04-26T06:08:32+08:00
• 0

  其实我刚开始工作了 . 您需要在要更改颜色的每列上使用“cellClassRules”属性 . 就像是：

  {headerName: "header", field:"field",suppressMenu: true, volatile: true, suppressMovable: true, cellClassRules: {'bold-and-red': 'x>1'} }
  

  这里规则中的'x'是列的值 . 此外，您需要将列标记为voaltile：true .
  要使volatile字段动态更改，在刷新数据时需要 api.softRefreshView() .
  css类'bold-and-red'可以在你的html文件中定义，如：.bold-and-red {color：darkred; font-weight：bold; }

  回复于 2024-04-26T06:08:32+08:00
• 0

  以下是代码片段，您可以在其中更改ag网格单元格文本和背景颜色的颜色 .

  var colDef = {
              name: 'Dynamic Styles',
              field' 'dummyfield',
              cellStyle: function(params) {
                  if (params.node.value=='Police') {
          //Here you can check the value and based on that you can change the color
                      //mark police cells as red
                      return {color: 'red', backgroundColor: 'green'};
                  } else {
                      return null;
                  }
              }
          }
  

  回复于 2024-04-26T06:08:32+08:00