css - 最新 Google Chart 版本 (v42) 中的时尚表格

Question

在最新的 google chart 版本中，v42 表格中的一些时尚元素发生了变化。这是我的实际代码:

https://jsfiddle.net/Khrys/mLgn76fu/

  google.setOnLoadCallback(drawTable);

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    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-striped table-condensed table-hover')
        .css("width", "85%");
    });

    table.draw(data);
  }

这不再有效了。这应该从 bootstrap 读取类并使用表的 bootstrap 类呈现表。

Answer 1

应用样式的函数是将它应用到父 div。我更改为添加 .find('table') 以获取表子。

https://jsfiddle.net/mLgn76fu/7/

        $(".google-visualization-table")
        .removeClass('google-visualization-table')
        .find('table')
        .addClass('table table-striped table-condensed table-hover')
        .css("width", "85%");
    });

这是一个快速的解决方案。事实上，真正的问题和更好的解决方案是重写您拥有的类“ killer ”，因为它没有按照您的预期进行。这就是为什么该类最终以 google-visualization-table 而不是您预期的最后带有 table-table 的原因。

我会杀死所有类，像这样:

    $(".google-visualization-table").find('*').each(function (i, e) {
        $(e).removeClass();
    });

然后像上面的 fiddle 或代码一样添加您的 Bootstrap 。