javascript - 排序后的谷歌图表(表格)重新设计

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在您的代码中是一个 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();
});