如何在Dash DataTable的特定行上启用编辑

时间:2020-08-25 10:21:42

标签: python plotly-dash

我想对破折号数据表的特定行启用修改,到目前为止,我们可以按列启用编辑,但是我不想对整个列启用编辑,我只想在特定行上启用它。 我可以使用'Add new columns as a loop Dim tempTb As DataTable Dim sqlString = "SELECT IT_CODE,IT_NAME FROM TB_ITEMS" tempTb = myTbClass.myFunctionFetchTbData(sqlString) For i = 0 To tempTb.Rows.Count - 1 strItCode = Trim(tempTb.Rows(i).Item("it_code")).ToString strSQL = "ALTER TABLE TB_ST_BOOK ADD IT_" & strItCode & " VARCHAR(20)" obj.CommandText = strSQL obj.ExecuteNonQuery() Next 突出显示该行:

style_data_conditional

但是我想使这一行也可编辑。

1 个答案:

答案 0 :(得分:0)

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

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,对于 td 元素,其中 {{1} } 属性不等于某个行号:

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; } 的第三行是可编辑的。