- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我使用 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/
我使用以下示例创建了一个下拉菜单:https://jsfiddle.net/asgallant/WaUu2/这使得可以选择一列,然后在图表上显示该线。 但我也想使用 ChartRangeFilter
如何动态构建类别过滤器并调用 JUnit 核心来运行我的测试?我正在尝试构建一个带有 main 方法的简单类,可以调用该方法来运行我的测试,但我确定这是否是一种干净的方法。 我们的想法是允许将包含项和
我有一个表,其中包含 myDate 和 partCategory 的过滤器。我的示例数据集包含一个日期 2020 年 1 月 1 日。CategoryFilter 多次显示 2020 年 1 月 1
我需要知道如何在 ControlWrapper 的 controlType: CategoryFilter 中禁用“选择一个值...” var categoryPicker = new google.
我需要知道如何在 controlType: ControlWrapper 的 CategoryFilter 中更改“选择一个值...” 例子: // Define a category picker
我使用 GoogleCharts API 创建了一个带有多个类别过滤器的表格,如下所示。 过滤掉数据后,我想检索每个过滤器中的所有值。 当前页面的url是home/。因此,如果我单击 NEXT 按钮,
我是一名优秀的程序员,十分优秀!