如何让jsGrid使用Bootstrap风格？

Question

我有一个表格UI，它是我用HTML语言绘制的Bootstrap表格样式，现在我用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应用于行和单元格，而不是整个表格。

我将尝试在DOM呈现后获取它，并在jsGrid将其写入之后使用表标记进行futzing，希望能做到这一点。但我希望更了解jsGrid的人能提供一个“公认的”过程来抛弃默认的CSS。

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

Answer 1

这就是我的想法--我只需在jsGrid呈现DOM元素后将其添加到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');
    }
  }
}