如何让 jsGrid 使用 Bootstrap 样式？答案

【问题标题】：How can I get jsGrid to use Bootstrap styles?如何让 jsGrid 使用 Bootstrap 样式？
【发布时间】：2020-10-26 15:17:57
【问题描述】：

我有一个表格 UI，我使用 Bootstrap 表格样式在 HTML 中绘制，现在我正在使用 jsGrid 使其功能化，我讨厌它，我想让 jsGrid 使用 Bootstrap CSS 而不是它自己的。

在引导程序中：

在 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，而不是整个表格。

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

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

【问题讨论】：

标签： twitter-bootstrap jsgrid

【解决方案1】：

好吧，这就是我的想法——我只是在 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');
    }
  }
}

【讨论】：