jquery - 错误的格式 freezelayout-right 与 SB 管理员
问题描述
我正在尝试将滚动数据表集成到https://startbootstrap.com/themes/sb-admin-2/引用的 SB Admin 模板中
这在一个简单的 html 页面中是可以的。
但是,当使用包含在 SB Admin 模板下的数据表时,我遇到了一个任意空间。
收到:
你能告诉我我错过了什么,知道我的html是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style>
body
{
background-image: url('../resources/icons/espingj.png')
}
</style>
</h:head>
<h:body>
<br/><br/><br/><br/>
<center>
<h:outputText value="Enquête de Satisfaction pour la classe " style="color:red;font-size: 20px"/>
<h:outputText value=" #{manageBean.connectedUser.classecourantet}" style="color:#0000ff;font-size: 20px"/>
</center>
<br/>
<div align="right">
<h:outputText value="Veuillez exprimé votre satisfaction:" style="color:blue;font-size: 13px;font-style: italic;"/>
<p:spacer width="5px"/>
<h:outputText value="I-" style="color:red;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputText value="Insatisfait" style="color:red;font-size: 13px;font-style: italic"/>
<p:spacer width="10px"/>
<h:outputText value="O-" style="color:grey;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputText value="Ordinaire" style="color:grey;font-size: 13px;font-style: italic"/>
<p:spacer width="10px"/>
<h:outputText value="S-" style="color:green;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputText value="Satisfait" style="color:green;font-size: 13px;font-style: italic"/>
<br/><br/>
<h:form id="drawDataTable">
<h:outputText value="(*) Merci de terminer votre procesus de satisfaction !."
rendered="#{manageBean.phase2 eq 'avoid'}" update="@all"
style="color:red;font-size: 13px;font-style: italic;font-weight: bold;"/>
<h:outputScript target="drawDataTable">
$(function()
{
synchronizeRowsHeight();
});
function synchronizeRowsHeight()
{
var $leftRows = $('.ui-datatable-frozenlayout-left').find('tr');
var $rightRows = $('.ui-datatable-frozenlayout-right').find('tr');
$leftRows.each(function(index)
{
var $leftRow = $(this);
var $leftHeight = $leftRow.innerHeight();
var $rightRow = $rightRows.eq(index);
var $rightHeight = $rightRow.innerHeight();
if ($rightHeight > $leftHeight)
{
$leftRow.innerHeight($rightHeight);
var diff = $rightHeight - $leftRow.innerHeight();
if (diff != 0)
$leftRow.innerHeight($rightHeight + diff);
$(window).trigger('resize');
}
$(".ui-datatable-scrollable-body").height(totalHeight-50);
})
}
</h:outputScript>
<p:dataTable var="criteria" value="#{manageBean.lnomFourthCriterions}" id="data4"
scrollable="true" scrollWidth="695" frozenColumns="1"
resizableColumns="true" styleClass="fixed-size"
tableStyle="width: auto; white-space: nowrap;">
<p:columnGroup type="frozenHeader" id="aa">
<p:row>
<p:column rowspan="2" headerText="Critères d'enseignement" escape="false" style="white-space:pre-line;"/>
</p:row>
</p:columnGroup>
<p:columnGroup type="scrollableHeader" id="bb">
<p:row>
<p:column colspan="#{manageBean.yearCount}" headerText="#{manageBean.lcs.get(18).value}" />
</p:row>
<p:row>
<ui:repeat value="#{manageBean.lms}" var="module">
<p:column headerText="#{manageBean.findModuleByCode(module)}" style="font-size: 10px;"/>
</ui:repeat>
</p:row>
</p:columnGroup>
<p:column width="10px" style="height: 50px">
<h:outputText value="#{criteria.libelleNom}" style="font-size: 12px"/>
</p:column>
<p:columns value="#{manageBean.lms}" var="module" width="1000px" style="font-size: 12px; height:50px">
<center>
<p:selectOneMenu styleClass="choices" required="true"
style="font-size: 11px;color:#737373;font-weight: normal;width:50%"
value="#{manageBean.selectedItemPriorityEnseignement}"
rendered="#{manageBean.getDisplaySelectedPriorityForEnseignement(criteria.abi.codeNom, module) eq null}">
<f:selectItems value="#{manageBean.getSelectItemsEnseignement(module)}"/>
<p:ajax update="drawDataTable" listener="#{manageBean.checkPriorityEns(criteria.abi.codeNom, manageBean.selectedItemPriorityEnseignement, module)}"/>
</p:selectOneMenu>
<p:spacer width="10px"/>
<h:outputText value="#{manageBean.getDisplaySelectedPriorityForEnseignement(criteria.abi.codeNom, module)}"
style="color:#0066ff;font-size: 13px;font-weight: bold;" rendered="#{manageBean.colorCellule(module) mod 2 == 0}"/>
<h:outputText value="#{manageBean.getDisplaySelectedPriorityForEnseignement(criteria.abi.codeNom, module)}"
style="color:#00ccff;font-size: 13px;font-weight: bold;" rendered="#{manageBean.colorCellule(module) mod 2 != 0}"/>
<p:spacer width="20px"/>
</center>
</p:columns>
</p:dataTable>
<center>
<br/><br/><br/>
<h:panelGrid columns="2">
<h:column>
<p:commandLink id="pre" action="secondPhase?faces-redirect=true">
<p:graphicImage value="/resources/icons/previous.png" style="width: 62px;height: 43px;"/>
</p:commandLink>
<p:tooltip for="pre" value="Précédant" style="font-size: 10px;" position="left"/>
</h:column>
<h:column>
<p:commandLink id="sui" ajax="true">
<p:graphicImage value="/resources/icons/next.png" style="width: 50px;height: 30px;"/>
<p:ajax update="@all" listener="#{manageBean.validatePhase2Step()}"/>
</p:commandLink>
<p:tooltip for="sui" value="Suivant" style="font-size: 10px;" position="right"/>
</h:column>
</h:panelGrid>
</center>
<br/><br/><br/>
</h:form>
</div>
</h:body>
</html>
解决方案
好的,很明显这是一个问题
- 宽度 --> 尝试像这样指定列的宽度:
<p:column rowspan="2" headerText="Critères d'enseignements" style="white-space:pre-line; width: 500px;"/>
- p:spacer --> 尝试删除 p:column 下的所有 p:spacer,没有用
希望有帮助
推荐阅读
- javascript - 在嵌套数组对象中为 SectionList 数据按索引设置状态
- java - 如何在 IntelliJ IDEA 中构建包含 .java 和 .class 的包?
- android - 当 NavHost 不在 MainActivity 中时 Android onSupportNavigateUp
- android - 如何将哈希映射放在另一个里面
- javascript - “document.getElementsByClassName”找到元素但无法访问
- node.js - Google Drive API 排除文件夹
- c - 如何在 For 循环中输入两个条件?
- amazon-web-services - 为公共存储桶/文件公开 AWS S3 ACL?
- android - 更新 Google Play 服务通知使 Firebase 测试实验室设备上的测试失败
- browser - 如何更改浏览器中的 `prefers-reduced-motion` 设置?