时间戳

首页 > 解决方案 > Tabulator table inside a JQuery UI dialog opens collapsed

jquery - Tabulator table inside a JQuery UI dialog opens collapsed

问题描述

A Tabulator table put inside a JQuery UI Dialog opens collapsed (no rows visible). After clicking on a column header the table unrolls. Am I missing a setting?

This is for an ASP.Net web application, the table is defined as a within the dialog.

CustomerDataSet below is a JSON array of objects. The data mapping appears to work fine as the table opens after a click on a table heading. 

var patTable = new Tabulator("#ptlist-table", {
        selectable: 1,
        data: CustomerDataSet, 
        columns: [
            { title: "Name", field: "name" },
            { title: "Customer ID", field: "id" },
            { title: "Location", field: "location" },
            { title: "Detail", field: "detail" },
            { title: "Order date/time", field: "timestamp" },
        ],
    });

$("#dialog-id").dialog("open");  // The table shows inside the dialog.

I expect the table to show in full upon the dialog opening. Instead, the table shows collapsed until I click on a column heading.

标签： jquerytabulator

解决方案

如果你初始化 Tabulator 的元素最初是隐藏的，你必须patTable.redraw(true)在它显示后调用。这是因为当一个元素被隐藏时，JavaScript 返回 0 的宽度和高度。

因此，当 Tabulator 初始化时，它对其内部元素的宽度和高度所做的所有计算都将不正确，并且表格不会按预期呈现。如果您想研究这种情况，还有许多其他 JS 解决方法，但我建议只要求 Tabulator 重绘/重新渲染自身。

推荐阅读