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

我认为实现目标的唯一方法是使用手动排序。该表将触发＆＃34;排序＆＃34;用户单击表头时的事件，您可以挂钩事件处理程序以获取排序信息，对数据进行排序，设置适当的选项以及重绘表。

要执行此操作，请将表格sort选项设置为event，然后创建＆＃34;排序＆＃34;事件处理程序。

如果您的代码中的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对象，则需要稍微调整一下，然后将其添加到包装器＆＃34;准备好＆＃34;代码中的事件处理程序：

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

排序后谷歌图表（表格）重新定位

2 个答案: