Question

我正在使用ag-grid在JSF Web-App上显示一些数据。

数据是通过托管bean生成的，它生成一个JSON字符串。

我在JS中使用EL直接在任何HTML请求上设置rowdata：

<ui:composition ...>
<script type="text/javascript">
columnDefinitions = [...]
var rowData = #{fooView.getBarListAsJson()};
var gridOptions = [...]
jQuery(document).ready(function() {
            var gridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(gridDiv, gridOptions);
        });
</script>
<div id="myGrid" class="ag-theme-fresh"></div>

可以通过ui:include src="/WEB-INF/components/fooTable.xhtml">将xhtml文件插入任何其他页面，这样可以正常工作。

只要我使用bootstrap标签将其作为<div id="tab-n" class="tab-pane fade">的孩子插入，它就不再有用了。数据未显示。检查浏览器中的源显示数据已生成并分配给rowData。尽管如此，在标签内部，它还没有显示在网格中。

Answer 1

我发现了问题：

<div class="tab-content">
        <div id="tab-1" class="tab-pane fade in active">
            <ui:include src="/WEB-INF/components/fooTable.xhtml">
                <ui:param name="type" value="1" />
            </ui:include>
        </div>

        <div id="tab-2" class="tab-pane fade">
            <ui:include src="/WEB-INF/components/fooTable.xhtml">
                <ui:param name="type" value="2" />
            </ui:include>
        </div>

        <div id="tab-3" class="tab-pane fade">
            <ui:include src="/WEB-INF/components/fooTable.xhtml">
                <ui:param name="type" value="2" />
            </ui:include>
        </div>
</div>

创建多个表。由于fooTable.xhtml中的javascript定义了一些全局变量，因此后续调用中出现了副作用。

将所有内容放入jQuery(document).ready(...)解决了问题。

JSF-App中的bootstrap选项卡中的ag-grid

1 个答案: