制表器表格列未正确调整大小 [英] Tabulator table columns not resizing correctly

问题描述

我正在尝试使用制表符 (4.4.3) 来生成表格，当表格具有基于百分比的宽度和最初是隐藏的(在引导选项卡中)时，我遇到了问题.当我尝试重绘最初隐藏的表格时，非百分比列会正确调整大小，但基于百分比的列保持较小且永远不会变为正确大小.

我想使用 fitColumns 布局模式，因为我希望列采用全宽.我在 fitData 模式下没有看到这个问题，但是我没有得到我真正想要的列扩展.

var cols = [{ 字段:'姓名'，标题:'姓名'，宽度:'20%' }，{ 字段:'描述'，标题:'描述'，宽度:'30%' }，{字段:'位置'，标题:'位置'，widthGrow:2}，];变量配置 = {列:列，数据:数据，布局:'fitColumns'};var always_shown_table = new Tabulator("#my-table", config);

我相信我在正确的时间调用 table.redraw() ，但看起来制表器布局代码从不调整具有设置宽度的列.如何让我的表格正确重绘这些列?

我创建了一个

解决方案

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

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

这似乎工作正常，但框架在重绘过程​​中直接执行此操作会很好.

I'm trying to use tabulator (4.4.3) to generate tables, and I am having trouble when the tables have percentage-based widths and are initially hidden (in a bootstrap tab). When I try to redraw the initially hidden table, the non-percentage column gets resized correctly, but the percentage-based columns stay small and never become their correct size.

I want to use the fitColumns layout mode, because I want the columns to take the full width. I don't see this problem in the fitData mode, but then I don't get the column expansion that I really want.

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);

I believe I'm calling table.redraw() at the correct time, but it looks like the tabulator layout code never adjusts the columns with set widths. How can I get my table to redraw these columns correctly?

I created a fiddle to demo this issue.

解决方案

My current workaround is to manually size the percentage-width columns after I redraw.

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));
    }
  }
});

This seems to work fine, but it'd be nice for the framework to do this directly during the redraw process.

这篇关于制表器表格列未正确调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！