将搜索查询添加到 Google 可视化表答案

【问题标题】：Adding a search query to Google visualization table将搜索查询添加到 Google 可视化表
【发布时间】：2013-08-29 02:57:11
【问题描述】：

我使用 Google 可视化创建了一个数据库，代码如下。

这里是html版本：

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Team');
        data.addColumn('string', 'Nationality');
        data.addColumn('number', 'Height');
        data.addColumn('number', 'Weight');
        data.addColumn('number', 'OverallRating');
        data.addColumn('string', 'Foot');
        data.addRows([
          ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
,
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

这里是 Javascript 代码版本：

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
    <html>
      <head>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
          google.load('visualization', '1', {packages:['table']});
          google.setOnLoadCallback(drawTable);
          function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Team');
            data.addColumn('string', 'Nationality');
            data.addColumn('number', 'Height');
            data.addColumn('number', 'Weight');
            data.addColumn('number', 'OverallRating');
            data.addColumn('string', 'Foot');
            data.addRows([
              ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
    ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
    ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
    ,
            ]);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true});
          }
        </script>
      </head>

      <body>
        <div id='table_div'></div>
      </body>
    </html>

    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="table"></div>
  </body>
</html>

我的问题是如何在页面顶部插入一个搜索框，允许用户通过输入他们的名字来搜索玩家？甚至比这更好，我怎么能实现一个搜索功能，该功能将根据某些列超过一定数量显示结果，例如“只显示总评分80以上的玩家”？

【问题讨论】：

标签： javascript mysql search google-visualization

【解决方案1】：

你想要的是一个Dashboard 和一个StringFilter Control 和一个NumberRangeFilter Control：

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Team');
    data.addColumn('string', 'Nationality');
    data.addColumn('number', 'Height');
    data.addColumn('number', 'Weight');
    data.addColumn('number', 'OverallRating');
    data.addColumn('string', 'Foot');
    data.addRows([
        ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
        ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
        ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
    ]);

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

    var stringFilter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'string_filter_div',
        options: {
            filterColumnIndex: 0
        }
    });

    var numberRangeFilter = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'numnber_range_filter_div',
        options: {
            filterColumnIndex: 5,
            minValue: 0,
            maxValue: 100,
            ui: {
                label: 'Overall Rating'
            }
        }
    });

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

    dashboard.bind([stringFilter, numberRangeFilter], [table]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});

见http://jsfiddle.net/asgallant/Ena84/

【讨论】：

是的，太好了，谢谢。但是有一个问题：如何包含多个字符串和数字范围过滤器？
这个答案对我非常有用。它应该有更多的赞成票！ ;-)
对于多个过滤器可以看jsfiddle.net/sM4f6/5