Таблица табулятора не отображается должным образом - PullRequest
Новая
       8

Таблица табулятора не отображается должным образом

0 голосов
/ 11 января 2019

У меня есть кнопка, когда при нажатии кнопки отображается таблица (табулятор), но проблема в том, что при нажатии кнопки таблица не отображается должным образом, таблица отображается, но содержимое не отображается, им нужно триггерное действие, например окно изменения размера или нажмите F12, чтобы показать содержимое.

При нажатии кнопки ничего не отображается enter image description here

Когда я нажимаю F12, содержимое просмотра, но заголовок отсутствует (красная линия) enter image description here

Когда я пытаюсь протестировать в jsfiddle, заголовок отображается, а содержимое - нет (необходимо изменить размер окна, чтобы показать данные) enter image description here

То, что я пробовал, выглядит так: 

$(document).on('click', '#testing', function(){
	$('#example-table').show();
});

//define some sample data
 var tabledata = [
 	{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
 	{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
 	{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
 	{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
 	{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];
 
 //create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
 	height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
 	data:tabledata, //assign data to table
 	layout:"fitColumns", //fit columns to width of table (optional)
 	columns:[ //Define Table Columns
	 	{title:"Name", field:"name", width:150},
	 	{title:"Age", field:"age", align:"left", formatter:"progress"},
	 	{title:"Favourite Color", field:"col"},
	 	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
 	],
 	rowClick:function(e, row){ //trigger an alert message when the row is clicked
 		alert("Row " + row.getData().id + " Clicked!!!!");
 	},
});
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id='testing'>Click this button !!</button>
<div id="example-table" style='display:none'></div>

Вы также можете проверить jsfiddle, отметьте здесь

Может кто-нибудь сказать мне, почему это происходит?

1 Ответ

0 голосов
/ 12 января 2019

Это, вероятно, потому что вы создаете таблицу, когда она скрыта. Табулятор должен быть видимым, когда он рисуется, потому что Virtual DOM должен вычислять длины элементов, которые составляют таблицу, чтобы правильно расположить таблицу. элемент DOM не имеет измерений до тех пор, пока он не станет видимым, что может привести к некоторому повреждению таблицы.

Самый простой способ - вызвать функцию перерисовки на столе сразу после того, как она станет видимой. 

table.redraw(true);

Эта тема подробно описана в Руководстве по быстрому запуску на веб-сайте Tabulator.

Причина, по которой этого не происходит в Chrome, заключается в том, что в chrome реализована функция ES8 ResizeObserver, которую табулятор может использовать для определения того, когда таблица меняет форму или становится видимой. Эта функция пока недоступна в других браузерах.

...