已解决：使用 justpy web 框架根据内容为 AG-Grid 中的单元格着色

Question

我在结合使用 AG-Grid 和 justpy 网络框架时遇到了问题。

JustPy 是一个面向对象、基于组件的高级 Python Web 框架，不需要前端编程。只需几行 Python 代码，您就可以创建交互式网站，而无需任何 JavaScript 编程。

我想根据单元格的值将单元格的颜色更改为网格。网格由 22 列和多行组成。网格的初始化如下：

#table Analysis
gridAnalysis = jp.AgGrid(style=styleTableAnalysis, a=divTableAnalysisdata)

我在AG-Grid官方文档JavaScript Data Grid: Cell Styles上找到了JS的解决方案。在本文档中，列出了使用 Cellstyle 和 CellClassRule 的变体。使用 Cellstyle 我可以仅更改整个列的颜色，不能更改特殊单元格。 CellClassRule 根本不起作用，因为我 不能通过使用 justpy.

包含该规则的 JS

这是我根据单元格的值给单元格着色的方法

#list with dict for the data of two rows
gridAnalysisRowContent = [
    {'C': 0.0206, 'Si': 0.003, 'Mn': 0.079, 'P': 0.007, 'S': 0.005, 'Al': 0.0, 'N2': 0.0, ...}, 
    {'C': 0.053, 'Si': 0.011, 'Mn': 0.851, 'P': 0.009, 'S': 0.0025, 'Al': 0.032, 'N2': 0.0, ...}
]

#turn list into pandas dataframe
gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)
            
#load dataframe data into the grid
gridAnalysis.load_pandas_frame(gridAnalysisRowContentDF)

#list for the keys of the dicts from list gridAnalysisRowContent
keys = ['C', 'Si', 'Mn', 'P', 'S', 'Al', 'N2', ...]

#iteration for coloring the cells depending on the cell value.
#if the value is less than the maximum value, the cell should be colored
for row in gridAnalysisRowContent:      #iteration for the two rows
    for k in range(len(keys)):          #iteration for the keys
        element = keys[k]               #current element
        maxValue = 0.5                  #max value
        contentElement = row[element]   #value of the current element
        if contentElement < maxValue:
            #coloring the cell
            gridAnalysis.options['columnDefs'][k]['cellStyle'] = {'background-color': 'lightblue'}

这很好用，但它为整列而不是单独的单元格着色。

有没有人知道如何根据内容为单元格着色？我将不胜感激。

Answer 1

您是否将 AdapTable 与 AG Grid 一起使用？

如果是这样，那么您可以使用他们的条件样式，它会使用您提供的任何规则根据单元格的值设置样式。

参见：https://docs.adaptabletools.com/guide/handbook-conditional-styling

Answer 2

解决方案

我找到了结合 justpy 网络框架为 AG-Grid 的单个单元格着色的解决方案。

对于该解决方案，我使用了 AG-Grid 的 CellClassRule 属性。您只需要将 cellClassRules 属性添加到要根据其自身值更改其背景颜色的单元格的 columnDefs。下面的代码显示了一个小例子。

import justpy as jp
import pandas as pd

#list with dict for the data of two rows
gridAnalysisRowContent = [
  {'C': 0.0206, 'Si': 0.003, 'Mn': 0.079, 'P': 0.007, 'S': 0.005, 'Al': 0.0, 'N2': 0.0}, 
  {'C': 0.053, 'Si': 0.011, 'Mn': 0.851, 'P': 0.009, 'S': 0.0025, 'Al': 0.032, 'N2': 0.0}
]

#turn list into pandas dataframe
gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)

def grid_test():
  wp = jp.WebPage() #create wp
  gridAnalysis = jp.AgGrid(a=wp)  #create grid

  #turn list into pandas dataframe
  gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)
              
  #load dataframe data into the grid
  gridAnalysis.load_pandas_frame(gridAnalysisRowContentDF)

  #iterate through all columnDefs
  for column_defs in gridAnalysis.options['columnDefs']: 
    maxValue = 0.05 #set max value
    minValue = 0.02 #set min value
    #define the cellClass Rules (only works with background color as tailwindcss class)
    column_defs['cellClassRules'] = {
      'bg-red-300': 'x > {max}'.format(max = maxValue), #set background color to red if cell value is greater than maxValue
      'bg-blue-300': 'x < {min}'.format(min = minValue) #set background color to blue if cell value is smaller than minValue
    }
  return wp

jp.justpy(grid_test)

注意： cellClassRule 属性仅适用于本例中的背景色 tailwindcss class 'bg-red-300' 和 'bg-blue-300'。 x 表示单元格值。

已解决：使用 justpy web 框架根据内容为 AG-Grid 中的单元格着色

Solved: coloring cell in AG-Grid depending on it's content by using justpy web framework

python

ag-grid

justpy