我正在使用以下代码重新设置表格的样式,但每次对列进行排序时,表格都会丢失样式。有办法保持吗?

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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!