使用justpy web框架根据内容在AG-Grid中着色单元格

Question

我遇到了一个问题，使用AG-Grid与公正的web框架相结合。

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

我希望将单元格的颜色更改为网格，具体取决于它的值。网格由22列和几行组成。网格的初始化如下：

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

我在官方的AG-Grid文档JavaScript数据网格:单元格样式上找到了JS的解决方案。在本文档中，列出了使用单元格样式和CellClassRule的变体。使用Cellstyle，我可以只更改整个列的颜色，和，而不是特殊的单元格。CellClassRule根本不工作，不能通过使用来包含用于该规则的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

溶液

我找到了一种解决方案，使AG-Grid的单个单元格与公正的web框架相结合。

对于该解决方案，我使用了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属性仅以尾风类的背景色工作，在本例中为“bg-红色-300”和“bg-蓝色-300”。X表示单元格值。

Answer 2

你是用AdapTable和AG网格吗？

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

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