在 python flask 中的相同路径上更新 ag 网格数据

Question

我有一个用例，其中我有相同路线的子导航。所以我的主要路线是

dashboard

，在仪表板中我有3个标签

tabA, tabB, and tabC

默认情况下，我在 tabA 上加载 agGridData，当我单击 tabB 时，我需要更改整个网格。

routes.py 代码

@blueprint.route('/dashboard', methods = ["GET"])
@login_required
def get_summary():                                                           
    try:                                                                        
        key = request.args.get('key')                                           
        cobContext = request.args.get('cobContext')                                               
        headers = get_primary_header(request)
        headers["Content-Type"] = "application/json"                            
                                                                                
        data = '{"key":"'+key+'", "cobContext": "'+cobContext+'"}'                                              
        response = requests.post(current_app.config['DASHBOARD_HOST'] + '/api/CacheMonitor/getSummary', data = data, headers = headers, cert=(current_app.config['CERT_PATH'], current_app.config['KEY_PATH']), verify=current_app.config['VERIFY'])
        data = json.loads(response.text) 
        return render_template('dashboard.html', form = data, key = key, cobContext = cobContext)                                         
    except ConnectionError:
        return render_template('server_down.html')
    except Exception as e:                                                      
        return render_template('page-500.html')


@blueprint.route('/tab-b', methods = ["GET"])
@login_required
def get_tabB_details():                                                           
    try:
                                                                                    
        headers = get_primary_header(request)
        headers["Content-Type"] = "application/json"                                
        data = '{"cob":"'+cob+'", "context":"'+context+'"}'                         
                                                                                    
        response = requests.post(current_app.config['CACHEMANAGER_HOST'] + '/api/CacheMonitor/getTabb', data = data, headers = headers, cert=(current_app.config['CERT_PATH'], current_app.config['KEY_PATH']), verify=current_app.config['VERIFY'])
        data = json.loads(response.text)
        if data["sumB"]==None:
            data["sumB"] = []
        return render_template('dashboard.html', form=data)
    except ConnectionError:
        return render_template('server_down.html')
    except Exception as e:
        print(str(e))
        return render_template('page-500.html')

仪表板.html

<ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active text-uppercase" id="tabA" data-toggle="tab" href="#tabA"
                            role="tab" aria-controls="tabA" aria-selected="true">Tab A</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" id="tabB" data-toggle="tab" href="#tabB"
                            role="tab" aria-controls="tabB" aria-selected="false">Tab B</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" id="tabC" data-toggle="tab"
                            href="#tabC" role="tab" aria-controls="tabC"
                            aria-selected="false">COB Context Details</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="tabA" role="tabpanel" aria-labelledby="tabA"><div id="tabAgrid"></<div>
                    <div class="tab-pane fade" id="tabB" role="tabpanel" aria-labelledby="tabB"><div id="tabBgrid"></<div>
                </div>

<script>
const gridOptions = {...} // defined assume its defined properly
document.addEventListener('DOMContentLoaded', function () {
                var gridDiv = document.querySelector('#tabAgrid');
                new agGrid.Grid(gridDiv, gridOptions);
            });

const gridOptionsTabB = {...} //defined assume defined properly

$("#tab-b").click(function () {
                 $.get("tab-b", function (data) {
                        console.log("{{form}}"); // it prints old form data retrieved from dashboard api
                        const gridDiv = document.querySelector('#tabBgrid');
                        new agGrid.Grid(gridDiv, gridoptionsTabB);
                    //}
                })
            });

            });

</script>

所以首先网格正确加载数据。但是，当我单击选项卡 B 时，选项卡发生变化并且网格显示为带有 gridBOptions 标题，但是数据不会加载到选项卡中。请建议我该如何解决，基本上我们需要更新渲染模板中的表单。