javascript - Python - Flask - Google Charts API 获取每个 CategoryFilter 中的值并将其传递给 href

我使用 GoogleCharts API 创建了一个带有多个类别过滤器的表格，如下所示。

过滤掉数据后，我想检索每个过滤器中的所有值。

当前页面的url是home/。因此，如果我单击 NEXT 按钮，我想导航到下一页，即 home/GT/ALL/ALL/ALL/ALL/。

现在我很困惑如何检索每个过滤器中的值并将它们写在 href 中。

<div class="btn-group">
    <button class="button" href="#">NEXT</button> <!--how to get the value from each filter and pass them on the href?-->
</div>

如有任何建议，我们将不胜感激。谢谢。

已更新

我试图简化我的问题。所以我在 /home/ 页面。该页面如下所示。

我从过滤器中选择一个值，例如我选择了A。

然后，如果我点击 NEXT 按钮，它将带我进入下一页，网址为 /home/A。

HTML 看起来像这样。

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['table', 'controls']});

      google.charts.setOnLoadCallback(createTableWithFilter);

      function createTableWithFilter() {

        var data = google.visualization.arrayToDataTable([
                    ['Type', 'Value'],
                    ['A', 1],
                    ['A', 2],
                    ['B', 1],
                    ['B', 2]
                    ]);

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        var categoryFilter = new google.visualization.ControlWrapper({
             'controlType': 'CategoryFilter',
             'containerId': 'filter_div',
             'options': {
                 'filterColumnLabel': 'Type'
             }
        });

        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table_div',
        });


        dashboard.bind(categoryFilter, table);
        dashboard.draw(data);

      }

    </script>

    <style>
        .btn-group .button {
            background-color: #008CBA;
            color: white;
            padding: 7px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            cursor: pointer;
            float: left;
        }
        .btn-group .button:not(:last-child) {
            border-right: none; /* Prevent double borders */
        }
        .btn-group .button:hover {
            background-color: #195389;
        }

    </style>

</head>

<body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div"></div>
        <div id="table_div"></div>
    </div>
    <div class="btn-group">
        <button class="button" href="#">NEXT PAGE</button>
    </div>
</body>
</html>

这是我的 Python 代码:

from flask import Flask, flash, redirect, render_template, request, session, abort
import os

tmpl_dir = 'templates'
app = Flask(__name__, template_folder=tmpl_dir)


@app.route("/")
def index():    
    return render_template('example_get_value_from_categoryfilter.html')      

if __name__ == "__main__":
    app.run()

如何从 CategoryFilter 中所选选项中获取值 A 并将其传递给按钮中的 href？

最佳答案

每个过滤器都有一个state属性

使用getState()方法检索过滤器的selectedValues...

selectedValues 将是一个包含一个或多个选定值的数组

categoryFilter.getState().selectedValues

使用 jquery，您可以使用以下内容更新 href...

if (categoryFilter.getState().selectedValues.length > 0) {
  $('.button').attr('href', categoryFilter.getState().selectedValues[0]);
}

编辑

您还需要使用'statechange'事件来了解过滤器何时发生

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    createTableWithFilter();
    window.addEventListener('resize', createTableWithFilter, false);
  },
  packages: ['table', 'controls']
});

function createTableWithFilter() {
  var data = google.visualization.arrayToDataTable([
    ['Type', 'Value'],
    ['A', 1],
    ['A', 2],
    ['B', 1],
    ['B', 2]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  var categoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Type'
    }
  });

  google.visualization.events.addListener(categoryFilter, 'statechange', function () {
    var urlAddr = '/home';

    categoryFilter.getState().selectedValues.forEach(function (filterValue) {
      urlAddr += '/' + filterValue;
    });
    $('.button').attr('href', urlAddr);

    console.log($('.button').attr('href'));
  });

  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div',
  });

  dashboard.bind(categoryFilter, table);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>
<div class="btn-group">
  <a class="button" href="#">NEXT</a> <!--how to get the value from each filter and pass them on the href?-->
</div>

关于javascript - Python - Flask - Google Charts API 获取每个 CategoryFilter 中的值并将其传递给 href，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43139165/

javascript - Python - Flask - Google Charts API 获取每个 CategoryFilter 中的值并将其传递给 href

上一篇：python - 用于计算设定范围内指数极限的脚本

下一篇：Python多个类调用特定类时出错