我正在使用以下代码重新设置表格的样式,但每次对列进行排序时,表格都会丢失样式。有办法保持吗?
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
选项 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();
});