制表符 Table 格式 Bootstrap 最初折叠的卡片

Question

我创建了一个 Tabulator table，它位于标准 Bootstrap 可折叠卡片内，用于在线 GIS 统计应用程序。用户可以在地图上绘制任何几何形状 select 并查询 GIS 数据，查询将 return 任何相关的地下水信息，然后显示在制表符 table 中。 table 在卡片 body 中，当用户点击卡片 header 时，table 可以是 hidden/shown。

这是我的 table 现在的样子，没有默认折叠卡片，格式正确： https://i.imgur.com/EVyh07K.png

现在卡片默认打开，所以 table 显示得很好，所有列的格式都正确。我希望默认情况下折叠卡片以获得更好的应用程序性能，然后一旦用户单击卡片 header 展开卡片，请正确格式化制表符 table。

我知道制表符 table 需要可见才能使 table 正确呈现，而且我知道您可以使用 [= 重新绘制 table 60=](true) 方法。我在用户单击卡片 header 时调用的函数中有重绘方法，但是，用户必须单击 header 两次才能获得正确格式的 table。

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

用户查询完成，第一次点击header展开卡片后，table全部乱码：

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

然后，再次点击header到re-collapse卡片：

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

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

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

所以，我的问题是：

有没有办法让重绘方法在用户第一次点击卡片时起作用 header 这样他们就不必点击它两次来获得正确格式的 table？此外，如果您将格式正确的 table 的第一张图像与格式基本正确的 table 的最后一张图像进行比较，您会注意到某些列略有偏差。还有办法解决这个问题吗？

这是我的制表符代码的 pastebin：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

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

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

制表符 Table 格式 Bootstrap 最初折叠的卡片

Tabulator Table Format in Bootstrap Card That Is Initially Collapsed

twitter-bootstrap

gis

tabulator