Формат таблицы табулятора в начальной загрузочной карточке, которая изначально свернута - PullRequest
Новая
       33

Формат таблицы табулятора в начальной загрузочной карточке, которая изначально свернута

0 голосов
/ 19 апреля 2019

Я создал таблицу Tabulator, которая размещается внутри стандартной складной карты Bootstrap для использования в онлайн-приложении ГИС-статистики.Пользователь может нарисовать любую геометрическую фигуру на карте, чтобы выбрать и запросить данные ГИС, и запрос вернет любую соответствующую информацию о подземных водах, которая затем отобразится в таблице табулятора.Таблица находится в теле карты, и когда пользователь нажимает на заголовок карты, таблица может быть скрыта / показана.

Вот так выглядит моя таблица прямо сейчас, без свернутой карты по умолчанию, правильно отформатированной: https://i.imgur.com/EVyh07K.png

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

Я знаю, что таблица табулятора должна быть видимой, чтобы таблица правильно отображалась, и я знаю, что вы можете перерисовать таблицу с помощью метода tabulatorTable.redraw (true).У меня есть метод перерисовки в функции, которая вызывается, когда пользователь щелкает заголовок карты, однако пользователь должен дважды щелкнуть заголовок, чтобы получить правильно отформатированную таблицу.

Сначала приложение загружается со свернутой картой.https://i.imgur.com/hcSokgR.png

После того, как пользователь завершит запрос и впервые щелкнет заголовок, чтобы развернуть карточку, таблица будет искажена:

https://i.imgur.com/7NFWKc7.png

Затемщелкните заголовок еще раз, чтобы снова свернуть карту:

https://i.imgur.com/ghU9z9d.png

Наконец, щелкните заголовок во второй раз, и вы получите (в основном) правильно отформатированную таблицу из-за нажатия кнопки мыши.событие, запускающее метод перерисовки:

https://i.imgur.com/WVXW8Ce.png

Итак, мои вопросы:

Есть ли способ заставить метод перерисовки работатьв первый раз, когда пользователь нажимает на заголовок карты, чтобы ему не нужно было щелкать его дважды, чтобы получить правильно отформатированную таблицу?Кроме того, если вы сравните первое изображение правильно отформатированной таблицы с последним изображением наиболее правильно отформатированной таблицы, вы заметите, что некоторые столбцы слегка отключены.Есть ли способ исправить это?

Вот пастбина моего кода табулятора: https://pastebin.com/6S806iHw

var tabulatorCardHeader = document.getElementById ('headingTable'); 

tabulatorCardHeader.onclick = function() {    
    app.statisticsTable.redraw(true);
}
//define attribute table
app.statisticsTable = new Tabulator("#synterra-stats-table", { // UPDATE WHEN DEPLOYING
    data: tabledata,
    height: 450,
    layout: "fitDataFill",
    selectable: 1,
    placeholder: "No Features Available In Specified Area",
    pagination: "local",
    paginationSize: 20,
    groupBy: '',
    groupClosedShowCalcs: true,
    columnCalcs: 'both',
    downloadConfig: {
        columnGroups: true,
        rowGroups: true, //include row groups in download
        columnCalcs: true, //include column calculation rows in download
    },
    paginationSizeSelector: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    rowClick: function(e, row) {
        // WHEN ROW IS CLICKED, ZOOM TO SELECTED FEATURE
        app.activeView.whenLayerView(app.layerToBeQueried).then(function(layerView) {

            var query = app.layerToBeQueried.createQuery();
            query.where = "StationShortName = " + "'" + row._row.data.StationShortName + "'";
            query.outSpatialReference = app.activeView.spatialReference;
            query.returnGeometry = true;

            app.layerToBeQueried.queryFeatures(query).then(function(results) {
                var selectedFeature = results.features[0];

                app.activeView.goTo({
                    target: selectedFeature.geometry,
                    zoom: 20
                });
            });
        });
    },
    rowMouseOver: function(e, row) {
        // highlight selected feature when row is hovered
        app.activeView.whenLayerView(app.layerToBeQueried).then(function(layerView) {

            var query = app.layerToBeQueried.createQuery();
            query.where = "StationShortName = " + "'" + row._row.data.StationShortName + "'";
            query.outSpatialReference = app.activeView.spatialReference;
            query.returnGeometry = true;

            layerView.queryFeatures(query).then(function(results) {
                var graphic = results.features[0];
                app.activeView.graphics.removeAll();
                app.selectedTableFeature.geometry = graphic.geometry;
                app.activeView.graphics.add(app.selectedTableFeature);
            });
        });
    },
    rowMouseLeave: function(e, row) {
        // remove highlight box graphic when user stops hovering over table row
        app.activeView.graphics.removeAll();
    },
    initialSort: [{
            column: "StationShortName",
            dir: "asc"
        }, //sort by this first
        // { column: "SAMPLETYPE", dir: "asc" }, //then sort by this second
    ],
    columns: [ I'VE REMOVED THE COLUMNS FROM HERE DUE TO POST LENGTH ISSUES...SEE PASTEBIN FILE FOR COMPLETE CODE

                    ]
                }

            ]
        }
    ]
});

Спасибо,

-Джастин

PS TABULATOR УДИВИТЕЛЬНЫЙ, СПАСИБО ТАКОЕ!

1 Ответ

1 голос
/ 22 апреля 2019

Поработав с этим несколько дней, я наконец понял это.Если вы откладываете функцию перерисовки до тех пор, пока не будет запущено событие «collapse» начальной загрузки show.bs.collapse, оно будет работать.Это функция, которую я добавил: 

<script>
            $(document).ready(function () {
                $('#collapseTable').on('show.bs.collapse', function () {
                    app.statisticsTable.redraw(true);
                })
            })
</script>
...