如何根据TableTorDash中的某些条件以编程方式选择行

Question

问题

我有一个dash应用程序，我在这个应用程序中使用dash_制表器。我有一个模式，当模式弹出时，模式中有一个表，用户选择她想要处理的行，然后单击保存，这样只在主页的表上显示所选行。另一次，如果用户想要更改行，那么她单击一个按钮，并弹出相同的模式，以便用户可以选择不同的行。我想要的是，当更新模式弹出时，主页上的行将被预选。因此，用户不必记住旧的行是什么，或者如果用户只是想添加另一行，那么用户不应该再次选择页面上的所有行。但我不知道怎么做

屏幕截图

main page
modal

代码

下面是我的应用程序的一个简单示例。我没有将上面解释的所有过程都放在这段代码中。我只想在模式打开时预选第3、4和5行（主表上的行）

    import dash_tabulator
    import dash
    from dash.dependencies import Input, Output
    import dash_html_components as html
    import dash_core_components as dcc
    from dash_extensions.javascript import Namespace
    import dash_bootstrap_components as dbc
    
    
    # bootstrap css
    external_stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css']
    
    app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
    ns = Namespace("myNamespace", "tabulator")
    
    
    columns = [
        {"formatter":"rowSelection", "width": 10, "headerSort":False, "cellClick": ns("cellClick")},
        { "title": "Name", "field": "name"},
        { "title": "Age", "field": "age"}
    ]
    
    # Setup some data
    data = [
        {"id":3, "name":"Christine Lobowski", "age":"42"},
        {"id":4, "name":"Brendon Philips", "age":"125"},
        {"id":5, "name":"Margret Marmajuke", "age":"16"},
    ]
    
    
    modal_data = [
        {"id":1, "name":"Oli Bob", "age":"12"},
        {"id":2, "name":"Mary May", "age":"1"},
        {"id":3, "name":"Christine Lobowski", "age":"42"},
        {"id":4, "name":"Brendon Philips", "age":"125"},
        {"id":5, "name":"Margret Marmajuke", "age":"16"},
        {"id":6, "name":"Fred Savage", "age":"16"},
    ]
    
    options = {"selectable":"true"}
    
    
    
    app.layout = html.Div(
        [
            dbc.Modal(
                [
                    dbc.ModalBody(
                        [
                            dash_tabulator.DashTabulator(
                                id='modal-table',
                                columns=columns,
                                data=modal_data,
                                options=options
                            ),
                        ]
                    ),
                ],
                id="modal",
                is_open=False,
                scrollable=False,
            ),
            dbc.Button("Open Modal", id = "open-modal-button"),
            dash_tabulator.DashTabulator(
                id='table',
                columns=columns,
                data=data,
                options=options
            ),
        ]
    )
    
    @app.callback(
        Output("modal", "is_open"),
        Input("open-modal-button", "n_clicks")
    )
    def open_modal(n_clicks):
        if n_clicks:
            return True
        else:
            return False
    
    if __name__ == '__main__':
        app.run_server(debug=True)

下面是触发cellClick回调的javascript代码：

    window.myNamespace = Object.assign({}, window.myNamespace, {
        tabulator: {
            cellClick: function(e, cell) {
                cell.getRow().toggleSelect();
            },
        }
    });

解决方案想法

首先，我尝试为python代码中的选定行查找此dash_制表器对象的属性，以选择或取消选择行。存在multiRowsClicked属性，但更改此属性不会反映在勾选框上。我在python中找不到这样做的方法

然后我想也许我可以在javascript代码中实现它。但是首先我需要得到table对象。在tabulator documentation中，有一种方法可以使用以下代码行从id获取表对象：

    var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table

但是要使用这行代码，我需要将制表器库导入到我的javascript代码中，但我也无法实现它。我试图通过npm将tablator.js安装到我的项目中，并在javascript代码顶部导入了tablator：

    var Tabulator = require('tabulator-tables');

但是后来桌子没有出现，出现了另一个奇怪的错误。以下是截图： tabulator-error

我尝试直接从UNPKG CDN服务器访问制表器，方法是通过以下代码行向dash构造函数添加资产\u外部\u路径：

    app = dash.Dash(__name__, external_stylesheets=external_stylesheets, assets_external_path="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js")

但同样的错误再次发生。有人能帮我吗