rangeSelectionChanged Ag 网格破折号图

Question

我想在 Dash Plotly 中使用 Ag Grid 来使用范围选择功能，但此代码不起作用：

import dash
from dash import html
from dash import dcc
from dash.dependencies import Input, Output, State
import dash_ag_grid

app = dash.Dash(__name__)


app.layout = html.Div([
    dash_ag_grid.AgGrid(
        id='ag-grid',
        columnDefs=[
            {'headerName': 'Make', 'field': 'make'},
            {'headerName': 'Model', 'field': 'model'},
            {'headerName': 'Price', 'field': 'price'}
        ],
        rowData=[
            {'make': 'Toyota', 'model': 'Corolla', 'price': 20000},
            {'make': 'Ford', 'model': 'Focus', 'price': 25000},
            {'make': 'BMW', 'model': 'X5', 'price': 60000}
        ],
        enableEnterpriseModules=True,
        dashGridOptions={
            "enableRangeSelection":True,
            "enableRangeSelectionParams":{
                'onRangeSelectionChanged': 'onRangeSelectionChanged'
            }
        }
    ),
    html.Div(id='output')
])

@app.callback(
    Output('output', 'children'),
    [Input('ag-grid', 'rangeSelectionChanged')],
)
def update_output(rangeSelection):
    print(rangeSelection)
    return rangeSelection

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

我想选择一些单元格并接收我选择的范围内的这些单元格

Answer 1

rangeSelectionChanged

不是 Dash Ag Grid 中的选项，您需要添加一个 自定义事件监听器 或使用 Grid Options 之一来触发自定义 JS 函数，例如将选择范围复制到剪贴板将触发要执行的 JS 函数。

应用程序.py

import dash
from dash import html
from dash import dcc
from dash.dependencies import Input, Output, State
import dash_ag_grid

app = dash.Dash(__name__)


app.layout = html.Div([
    dash_ag_grid.AgGrid(
        id='ag-grid',
        columnDefs=[
            {'headerName': 'Make', 'field': 'make'},
            {'headerName': 'Model', 'field': 'model'},
            {'headerName': 'Price', 'field': 'price'}
        ],
        rowData=[
            {'make': 'Toyota', 'model': 'Corolla', 'price': 20000},
            {'make': 'Ford', 'model': 'Focus', 'price': 25000},
            {'make': 'BMW', 'model': 'X5', 'price': 60000}
        ],
        enableEnterpriseModules=True,
        dashGridOptions={
            "enableRangeSelection": True,
            "processCellForClipboard": {"function": "myFunction(params)"}  # when copied trigger myFunction
        },
    ),
    html.Div(id='output')
])


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

资产/dashAgGridFunctions.js

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});


dagfuncs.myFunction = (params) => {
    console.log(params);
};