如何让 jsGrid 使用 Bootstrap 样式?

How can I get jsGrid to use Bootstrap styles?

我有一个表格 UI,我在 HTML 中用 Bootstrap table 样式绘制了草图,现在我正在使用 jsGrid 使它起作用,我讨厌它,我想让 jsGrid 使用 Bootstrap CSS 而不是它自己的

在Bootstrap中:

在 jsGrid 中:

我的模型代码非常简单(删除了重复的行):

<table class="table table-striped light">
  <tr>
    <th>Team</th>
    <th>Agent</th>
    <th>State</th>
    <th>Duration</th>
  </tr>
  <tr><td>GLAM-pg01-s</td><td>Mildred Drysdale</td><td>Idle</td><td>01:39:33</td></tr>
  <tr><td>GLAM-pg01-s</td><td>Mildred Drysdale</td><td>Idle</td><td>01:39:33</td></tr>
  <tr><td>GLAM-pg01-s</td><td>Mildred Drysdale</td><td>Idle</td>
</table>

问题是,jsGrid 似乎只允许 CSS 应用于 ROWS 和 CELLS,而不是整体 table。

我将在渲染后尝试获取 DOM,并在 jsGrid 将其写入后使用 table 标签进行 futzing,希望可以做到。但我希望更了解 jsGrid 的人可以提供一个“公认的”程序来放弃默认设置 CSS.

为什么滚动条显示时没有拇指?呃...

好吧,这就是我的想法 - 我只是在 类 元素被 jsGrid 渲染后添加到 DOM 元素。它还纠正了错误的滚动。

function displayData(results) {
  $('#daGrid').jsGrid( {
    width: '100%',
    height: '90%',
    autoload: false,
    selecting: true,
    data: results,
    rowClick: onRowClick,
    fields: chatAgents.layout
  });
  
  correctCSS();
}

function correctCSS() {
  $('table').addClass('table table-striped light');
  var h = $('.jsgrid-grid-body').css('height');
  if( h ) {
    h = h.match((/\d*/));
    if( h[0] > 500 ) {
      $('.jsgrid-grid-body').height(490);
      $('.jsgrid-grid-body').css('overflow-y', 'scroll');
    }
  }
}