Javascript Google图表（表格）排序后重新排序

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

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%");
});

---

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

为此，请将表的

sort

选项设置为

event

，并创建一个“sort”事件处理程序

如果代码中的

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();
});

---

对于当前的谷歌图表（截至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();