Question

我已经创建了一个制表器表，该表位于标准的Bootstrap可折叠卡中，可用于在线GIS统计应用程序。用户可以在地图上绘制任何几何形状以选择和查询GIS数据，查询将返回任何相关的地下水信息，这些信息随后将显示在制表器表格中。该表位于卡体内，当用户单击卡头时，该表可以隐藏/显示。

这是我的表格现在的样子，默认情况下不会折叠卡，其格式正确： https://i.imgur.com/EVyh07K.png

现在默认情况下该卡处于打开状态，因此该表显示的很好，并且所有列的格式都正确。我希望默认情况下将卡折叠起来，以提高应用程序性能，然后，一旦用户单击卡头以展开卡，请正确设置制表符表格的格式。

我知道为了使表格正确呈现，需要使制表器表格可见，并且我知道可以使用tabulatorTable.redraw（true）方法重绘表格。我在用户单击卡标题时调用的函数中有redraw方法，但是，用户必须单击标题两次才能获得格式正确的表。

首先，应用程序加载有折叠的卡。 https://i.imgur.com/hcSokgR.png

用户完成查询并第一次单击标题以展开卡后，表将全部显示为乱码：

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

然后，再次单击标题以重新折叠卡片：

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

最后，第二次单击标题，由于onclick事件触发了redraw方法，您将获得（大部分）格式正确的表：

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

                    ]
                }

            ]
        }
    ]
});

谢谢

-贾斯汀

P.S。 TABULATOR很棒，非常感谢您！

Answer 1

几天后，我终于弄明白了。如果您将重绘功能延迟到引导'崩溃'事件'show.bs.collapse'被触发后，它将起作用。这是我添加的功能：

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

最初折叠的引导卡中的制表符表格格式

1 个答案: