Табулированная таблица внутри диалогового окна JQuery UI открывается свернутой - PullRequest
Новая
       12

Табулированная таблица внутри диалогового окна JQuery UI открывается свернутой

0 голосов
/ 25 марта 2019

Таблица Tabulator, помещенная в JQuery UI Dialog, открывается свернутой (строки не видны). После нажатия на заголовок столбца таблица раскатывается. Я пропустил настройку?

Это веб-приложение ASP.Net, таблица определяется как диалоговое окно.

CustomerDataSet ниже представляет собой массив объектов JSON. Отображение данных работает нормально, так как таблица открывается после щелчка по заголовку таблицы. 

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.

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

Ответы [ 2 ]

1 голос
/ 25 марта 2019

Если элемент, с которым вы инициализируете Tabulator, изначально скрыт, вам нужно будет вызвать patTable.redraw(true) после его отображения.Это потому, что когда элемент скрыт, JavaScript возвращает 0 для ширины и высоты.

Таким образом, когда инициализируется Tabulator, все вычисления, которые он выполняет для ширины и высоты для своих внутренних элементов, будут некорректными, и таблица выиграет.не рендер, как вы ожидаете.Есть много других обходных путей JS для этого сценария, если вы хотите исследовать его, но я предлагаю просто попросить Tabulator перерисовать / перерисовать сам.

0 голосов
/ 25 марта 2019

Мне удалось разрешить его программным нажатием на заголовок столбца таблицы при открытии диалогового окна:

myDialog = $ ("# dialog-id"). Dialog ({ ... ... open: function () { ... $ ( "# PtList стол") найти ( "табулятор-седловину") первую () нажмите (); }, ...

...