Twitter bootstrap 引导卡中最初折叠的制表器表格格式

Twitter bootstrap 引导卡中最初折叠的制表器表格格式,twitter-bootstrap,gis,tabulator,Twitter Bootstrap,Gis,Tabulator,我已经创建了一个表格,它位于一个标准引导折叠卡中,用于在线GIS统计应用程序。用户可以在地图上绘制任何几何图形,以选择和查询GIS数据,查询将返回任何相关的地下水信息,这些信息随后显示在表格中。表格位于卡体中,当用户单击卡头时,表格可以隐藏/显示 这就是我的表格现在的样子,默认情况下,卡片不会折叠,格式正确: 现在,默认情况下,卡是打开的,因此表显示得很好,所有列的格式都正确。我希望在默认情况下将卡折叠以提高应用程序性能,然后在用户单击卡头以展开卡后,将制表器表正确格式化 我知道制表器表需要是

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

这就是我的表格现在的样子,默认情况下,卡片不会折叠,格式正确:

现在,默认情况下,卡是打开的,因此表显示得很好,所有列的格式都正确。我希望在默认情况下将卡折叠以提高应用程序性能,然后在用户单击卡头以展开卡后,将制表器表正确格式化

我知道制表器表需要是可见的,以便正确呈现表,并且我知道可以使用tabletortable.redraw(true)方法重新绘制表。我在一个函数中使用了redraw方法,当用户单击卡片标题时会调用该方法,但是,用户必须单击标题两次才能获得格式正确的表

首先,应用程序加载一个折叠的卡。

用户完成查询后,第一次点击表头展开卡片后,该表全部被乱码:

然后,再次单击标题以重新折叠卡:

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

所以,我的问题是:

有没有一种方法可以让重画方法在用户第一次单击卡片标题时工作,这样他们就不必单击两次就可以得到格式正确的表格?此外,如果将正确格式化的表的第一个图像与大部分正确格式化的表的最后一个图像进行比较,您会注意到有些列稍微偏离了方向。有没有办法解决这个问题

这是我的制表器代码的粘贴箱:

var tabletorCardHeader=document.getElementById('headingTable')

谢谢

-贾斯汀


p.S.制表器太棒了,非常感谢

经过几天的胡闹,我终于明白了。如果将重画函数延迟到启动引导“collapse”事件“show.bs.collapse”之后,它将工作。这是我添加的函数:

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

$(文档).ready(函数(){
$('#collapseTable')。on('show.bs.collapse',function(){
应用统计表重新绘制(真);
})
})
<script>
            $(document).ready(function () {
                $('#collapseTable').on('show.bs.collapse', function () {
                    app.statisticsTable.redraw(true);
                })
            })
</script>