Question

我创建了带有服务器端数据弹出的google Visualization表（在PHP中创建的Json并返回到datatable）。如何为此表添加搜索过滤器？我在Visulaization playgroud中看过Sample Code。它显示了使用Control Wrapper和Chart Wrapper.So如何为我的DataTable应用这个控件包装器（从PHP返回的Json数据）？

function drawmsgtable(users)
    {
        var msgdata = $.ajax({
            url: "http://mysite/phpscripts/msgtable.php?users="+users+"",
            dataType:"json",
            async: false
        }).responseText;
        var messagedatatable = new google.visualization.DataTable(msgdata);

        var options={'backgroundColor': 'transparent', 'width': 'auto'};
        $('#table_div').empty();
        var msgTable = new google.visualization.Table(document.getElementById('table_div'));
        msgTable.draw(messagedatatable, options);
    }

Answer 1

首先，您需要加载“controls”包

google.load('visualization', '1', {packages: ['controls']});

然后，您需要将Table对象转换为ChartWrapper对象，并添加一个Dashboard对象和ControlWrapper对象（和HTML div来保存它们 - Dashboard div应包含控件和表div，但它不是严格的必须拥有它）。将控件绑定到仪表板中的表并绘制仪表板

function drawmsgtable(users) {
    var msgdata = $.ajax({
        url: "http://mysite/phpscripts/msgtable.php?users=" + users + "",
        dataType: "json",
        async: false
    }).responseText;
    var messagedatatable = new google.visualization.DataTable(msgdata);

    var options = {
        backgroundColor: 'transparent',
        width: 'auto'
    };

    $('#table_div').empty();

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

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

    var control = new google.visualization.ControlWrapper({
        chartType: 'StringFilter',
        containerId: 'table_div',
        options: {
             filterColumnIndex: 0
        }
    });

    dashboard.bind([control], [msgTable]);
    dashboard.draw(messagedatatable);
}

示例HTML：

<div id="dash">
    <div id="control_div"></div>
    <div id="table_div"></div>
</div>

如果您希望能够对多个列进行过滤，则需要为要过滤的每列添加其他控件。

如何为具有服务器端填充数据的表添加搜索过滤器

1 个答案: