css - Bootstrap 表和 jsf

Question

我尝试将 Bootstrap 表库与 jsf 一起使用，但它对我不起作用。

我有一个包含这些文件的 facelet 模板:

 <h:outputStylesheet name="./css/bootstrap-datepicker.css"/>
    <h:outputStylesheet name="./css/bootstrap.css"/>
    <h:outputStylesheet name="./css/bootstrap-table.css"/>
    <h:outputStylesheet name="./css/sb-admin.css"/>
    <h:outputStylesheet name="./css/morris.css"/>

    <h:outputStylesheet name="./css/AdminLTE.css"/>
    <h:outputScript name="jquery/jquery-plugins.js" library="primefaces"/>
    <h:outputScript name="./js/jquery.js"></h:outputScript>
    <h:outputScript name="./js/addrow.js"></h:outputScript>
    <h:outputScript name="./js/modal.js"></h:outputScript>
    <h:outputScript name="./js/bootstrap.js"></h:outputScript>
    <h:outputScript name="./js/app.js"></h:outputScript>
    <h:outputScript name="./js/dashboard.js"></h:outputScript>
    <h:outputScript name="./js/demo.js"></h:outputScript>
    <h:outputScript name="./js/bootstrap-datepicker.js"></h:outputScript>
    <h:outputScript name="./js/flot-data.js"></h:outputScript>
    <h:outputScript name="./js/bootstrap-table-all.js"></h:outputScript>
    <h:outputScript name="./js/raphael.min.js"></h:outputScript>
    <h:outputScript name="./js/morris.js"></h:outputScript>
    <h:outputScript name="./js/formatter.js"></h:outputScript>
    <h:outputScript name="./js/jquery.formatter.js"></h:outputScript>

我创建了一个 xhtml 文件，它是这个模板的客户端。默认的 bootstrap 在每个客户端都可以正常工作，我可以使用 bootstrap.css 中的每个类

但是当我尝试在客户端 xhtml 中创建一个表时，如下所示:

<table id="tsttable"  class="table table-bordered table-hover" >

<tr>
<th>Azonosító</th>
<th>Albetét típusa</th>
<th>Utca neve</th>
<th>Költségviselő neve</th>
</tr>

<tbody class="searchable">

<ui:repeat var="pack" value="#  {mainViewController.showPackageContent()}" varStatus="status">

<tr>
<td>
<h:commandLink  class="glyphicon glyphicon-pencil" value="#{pack.id}"  actionListener="#{mainViewController.navigateToChosedCustomer(item.id)}">

</h:commandLink>
</td>

<td>#{pack.types.description}</td>

<td>#{pack.BFlatDataCollection.addrStreet}</td>

<td>#{pack.BAssocCaseCollection.userId.lastName}
           #{pack.BAssocCaseCollection.userId.firstName}
</td>

</tr>
</ui:repeat>

</tbody>

</table>

然后，如果我将这个“data-toggle="table"属性添加到表中，它没有任何效果......

但是如果我尝试像这样用 js 在客户端 xhtml 中创建一个表，代码会创建 Bootstrap 表:

$('#tsttable').bootstrapTable({
 columns: [{
 field: 'id',
 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }]});

如何在 jsf 中使用 bootstrap 表？有人知道吗？谢谢你!

Answer 1

在这方面，Jsf 只不过是一个服务器端 html 生成器。如果你可以在纯 html 中完成(没有 $('#tsttable').bootstrapTable({...}))，你可以在 jsf 中完成。因此，弄清楚这一点将使上面的示例自动运行。但弄清楚这一点应该是一个不同的问题