python - 如何启用对 Dash DataTable 上特定行的编辑

Question

我想在破折号数据表的特定行上启用修改，到目前为止我们可以按列启用编辑，但我不想在整个列上启用编辑，我只想在特定行上启用它.我可以使用 style_data_conditional 突出显示该行:

style_data_conditional = [
                {
                    "if": {"column_id": x, "row_index": 2},
                    "backgroundColor": 'red',
                    "cursor": "pointer",
                }
                for x in df.columns[2:]
            ]

但我想让这一行也可以编辑。

Answer 1

一种方法是使用 css 使整个 DataTable 可编辑，并使特定行不可编辑。

import dash
import dash_table
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    editable=True,
)


if __name__ == "__main__":
    app.run_server(debug=True)

当 DataTable 不可编辑时，td 包含一个包含单元格文本的 div。可编辑时，带有单元格文本的 div 的不透明度设置为 0，并添加带有单元格值的输入。

我们可以添加一些 css 来删除此输入，并将具有单元格值的 div 的 opacity 设置为 1 for td 元素，其中 data-dash-row 属性不等于某个行号:

td:not([data-dash-row="2"]) div.input-cell-value-shadow {
  opacity: 1 !important
}

td:not([data-dash-row="2"]) input {
  display: none;
}

所以上面的样式使得只有 DataTable 的第三行是可编辑的。