Google图表(表)排序后的重新样式

Question

我使用下面的代码来重新设计表的样式，但是每次对列进行排序时，表就会丢失样式。有办法保存它吗？

google.visualization.events.addListener(table, 'ready', function () {
    $(".google-visualization-table-table").find('*').each(function (i, e) {
        var classList = e.className ? e.className.split(/\s+/) : [];
        $.each(classList, function (index, item) {
            if (item.indexOf("google-visualization") === 0) {
                $(e).removeClass(item);
            }
        });
    });

    $(".google-visualization-table-table")
        .removeClass('google-visualization-table-table')
        .addClass('table table-bordered table-striped table-condensed table-hover')
        .css("width", "85%");
});

Answer 1

我认为实现你想要的目标的唯一方法是使用手动排序。当用户单击表头时，该表将触发一个“排序”事件，您可以将事件处理程序连接起来以获取排序信息、对数据进行排序、设置适当的选项并重新绘制该表。

为此，请将表的sort选项设置为event，并创建“排序”事件处理程序。

如果代码中的table是一个表对象，则如下所示：

google.visualization.events.addListener(table, 'sort', function (e) {
    var view = new google.visualization.DataView(data);
    view.setRows(data.getSortedRows({column: e.column, desc: !e.ascending}));
    options.sortAscending = e.ascending;
    options.sortColumn = e.column;
    table.draw(view, options);
});

如果table是ChartWrapper对象，则需要稍微调整一下，并将其添加到代码中包装器的“就绪”事件处理程序中：

google.visualization.events.addListener(table.getChart(), 'sort', function (e) {
    var view = table.getView();
    view.rows = data.getSortedRows({column: e.column, desc: !e.ascending});
    table.setView(view);
    table.setOption('sortAscending', e.ascending);
    table.setOption('sortColumn', e.column);
    table.draw();
});

Answer 2

对于当前的Google图表(截至2014年9月6日)，以下解决方案正在运行：

var applyStyling = function() {
    // some restyling code:
    $(".google-visualization-table-table").find('*').each(function (i, e) {
        var classList = e.className ? e.className.split(/\s+/) : [];
        $.each(classList, function (index, item) {
            if (item.indexOf("google-visualization") === 0) {
                $(e).removeClass(item);
            }
        });
    });
    $(".google-visualization-table-table")
        .removeClass('google-visualization-table-table')
        .addClass('table table-bordered table-striped table-condensed table-hover')
        .css("width", "85%");
}

// ...

var table = new google.visualization.Table(document.getElementById('table_div'));

google.visualization.events.addListener(table, 'sort', applyStyling);
applyStyling();