Javascript 在页面之间切换时,行不会高亮显示
我有一个JSF表,其中的行在单击时高亮显示:Javascript 在页面之间切换时,行不会高亮显示,javascript,jsf,jsf-2,Javascript,Jsf,Jsf 2,我有一个JSF表,其中的行在单击时高亮显示: <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang=
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_sessions.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form id="form">
<ui:debug />
<!-- The sortable data table -->
<h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="№" actionListener="#{SessionsController.sort}">
<f:attribute name="№" value="№" />
</h:commandLink>
</f:facet>
<h:outputText value="#{table.rowIndex + SessionsController.firstRow + 1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Account Session ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.aSessionID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="User ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.userID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity Start Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityStart}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity End Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityEnd}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activity}" />
</h:column>
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton value="first" action="#{SessionsController.pageFirst}"
disabled="#{SessionsController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
disabled="#{SessionsController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:commandButton value="next" action="#{SessionsController.pageNext}"
disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:commandButton value="last" action="#{SessionsController.pageLast}"
disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{SessionsController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
rendered="#{page != SessionsController.currentPage}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandLink>
<h:outputText value="#{page}" escape="false"
rendered="#{page == SessionsController.currentPage}" />
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton value="Set" action="#{SessionsController.pageFirst}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<h:commandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<script type="text/javascript">
$("tr").not(':first').hover(
function () {
$(this).css("background","#707070");
},
function () {
$(this).css("background","");
}
);
function highlight(param) {
var row = jQuery(param).parent().parent().children();
row.toggleClass('highlited');
}
</script>
</h:form>
</div>
<div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
历史中心
$(“tr”)。不是(':first')。悬停(
函数(){
$(this.css(“背景”,“#707070”);
},
函数(){
$(this.css(“背景”和“”);
}
);
函数高亮显示(参数){
var row=jQuery(param.parent().parent().children();
row.toggleClass('highlited');
}
当我选择一行时,该行将高亮显示:
但当我移动到另一个页面并返回时,所选行不会突出显示。它们仅在以下情况下进行检查:
也许我需要这个标签中的其他参数:
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
或者我必须修改JavaScript?我怎样才能解决这个问题
我如何修改JavaScript以突出显示每个选中的复选框。不仅仅是从
onclick
事件调用时 我认为当您更改页面并返回时,行会重新呈现,因此所有应用的css都会丢失
可以考虑使用一个组件库,例如PrimeFACS,它处理框外的内容。在这里您可以看到演示:
除了使用primefaces,还有什么解决方案吗?@PeterPenzov您必须添加一个javascript,突出显示所有选定的行,并在表单更新后执行它。但我强烈建议您使用组件库(primefaces、richfaces、icefaces…),因为否则您必须处理这些库自动处理的大量事情,如高亮显示、分页、筛选、排序(以及仅用于数据表的那些)