Question

制表器表格列大小调整不正确

2019-10-24

5942

tabulator

我尝试使用制表器 (4.4.3) 来生成表格，当表格具有基于百分比的宽度并且最初隐藏（在引导选项卡中）时，我遇到了麻烦。当我尝试重新绘制最初隐藏的表格时，非百分比列会正确调整大小，但基于百分比的列会保持较小并且永远不会变成其正确大小。

我想使用 fitColumns 布局模式，因为我希望列占据整个宽度。在 fitData 模式下我没有看到此问题，但我没有获得真正想要的列扩展。

var cols = [
  { field: 'name', title: 'Name',  width: '20%' },
  { field: 'description', title: 'Description',  width: '30%' },
  { field: 'location', title: 'Location', widthGrow: 2 },
];
var config = {
  columns: cols,
  data: data,
  layout: 'fitColumns'
};
var always_shown_table = new Tabulator("#my-table", config);

我相信我在正确的时间调用 table.redraw() ，但看起来制表器布局代码从未调整具有设置宽度的列。我怎样才能让我的表格正确地重新绘制这些列？

我创建了一个 fiddle 来演示这个问题。

Answer 1

我目前的解决方法是在重绘后手动调整百分比宽度列的大小。

my_table.columnManager.columnsByIndex.forEach(function (col) {
  if (col.visible) {
    var width = col.definition.width;
    if (width && typeof width === 'string' && width.indexOf('%') > -1) {
      col.setWidth(my_table.element.clientWidth / 100 * parseInt(width));
    }
  }
});

这似乎工作正常，但如果框架能在重绘过程中直接执行此操作就更好了。

Answer 2

或者您可以删除已定义的明确宽度，因为您正在使用 layout: 'fitColumns'

var data = [{
    name: '1',
    description: 'Description of thing 1',
    location: 'Location 1'
  },
  {
    name: '2',
    description: 'Description of thing 2',
    location: 'Location 2'
  },
  {
    name: '3',
    description: 'Description of thing 3',
    location: 'Location 3'
  },
];
var cols = [{
    field: 'name',
    title: 'Name',
  },
  {
    field: 'description',
    title: 'Description',
  },
  {
    field: 'location',
    title: 'Location',
  },
];

var config = {
  columns: cols,
  data: data,
  layout: 'fitColumns'
};
var always_shown_table = new Tabulator("#always-shown", config);
var initially_hidden_table = new Tabulator("#initially-hidden", config);

$("a[data-toggle='tab']").on('shown.bs.tab', function(e) {
  if (e.target.id === 'tabulator-tab') {
    console.log('redrawing table');
    setTimeout(() => {
      initially_hidden_table.redraw(true);
    }, 0)
    //initially_hidden_table.redraw(true);
  }

})

.tabulator-table {
  width: 100%;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<h4>
  Always visible table:
</h4>
<div id="always-shown" class="tabulator-table"></div>


<h4 class="mt-3">
  Table initially hidden in the tabulator tab:
</h4>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tabulator-tab" data-toggle="tab" href="#tabulator" role="tab">Tabulator</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane show active" id="home" role="tabpanel">
    Bacon ipsum dolor amet leberkas prosciutto pork loin pastrami jowl strip steak shoulder. Hamburger tenderloin filet mignon kevin, biltong doner ribeye meatloaf capicola. Jerky kevin bresaola tongue jowl shankle ball tip. Corned beef bacon capicola, cupim
    strip steak beef pork belly cow spare ribs pork loin prosciutto t-bone burgdoggen chuck pig. Landjaeger burgdoggen bacon, tail kielbasa pig porchetta alcatra filet mignon shank.
  </div>
  <div class="tab-pane" id="tabulator" role="tabpanel">
    <div id="initially-hidden" class="tabulator-table"></div>
  </div>
</div>