Блог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var tabulatorCardHeader = document.getElementById(‘Таблица заголовков’);

 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

                    ]
                }

            ]
        }
    ]
});
  

Спасибо,

-Джастин

P.S. ТАБУЛЯТОР ПОТРЯСАЮЩИЙ, БОЛЬШОЕ ВАМ СПАСИБО!

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

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