0
我想從2天開始解決我的primefaces圖實現中遇到的問題。 我想在「鼠標懸停」圖表元素上突出顯示與該元素相關的其他元素。 我有它的工作，但只有當我更新整個圖/表格時，我更新的元素。 我有這種方法的兩個問題。 首先，鼠標懸停在鼠標懸停上的所有綁定不斷更新，得到重置，所以我有事件發生，但我只是進入。還有80％的時間我不會捕捉mouseleave/hover事件，因爲不斷的調用。 此外，我不能滾動圖表，因爲鼠標懸停上的不斷更新會重置滾動。 ;-)正在更新某些Primefaces圖元素
於是，我就只更新我其實鼠標懸停改變了圖元素，但我找不到我嘗試了通過primefaces RequestContect updateing元素的方式，爲我工作...
。更新 我用於Id等的所有變化： 1-0201 圖-1-0201 圖：圖-1-0201
我嘗試一個JavaScript查詢從primefaces執行。我得到了一個你不能解決的錯誤。儘管相同的查詢適用於xhtml。我也無法弄清楚那個錯誤。雖然我不認爲這會有所幫助，因爲相同的代碼在HTML文件中執行時也不起作用。
我試着只保存圖元素值中的連接，然後通過元素上的隱藏輸入來訪問這個值。我在javascript中獲得了連接元素的ID，但我無法通過JavaScript更新元素。 「裏面」（剩下的評論代碼）是我用於存儲連接的Element變量引用的隱藏輸入的變量） 我在javascript中獲得了列表和單個連接的id，但無法管理更新元素。
我不是那種在javascript中經歷過的。我幾天前第一次使用它。
那麼如何在不重新加載孔圖的情況下更新primefaces圖中某些元素的樣式呢？ 必須有一個非常簡單的方法來做到這一點，或一個簡單的方法來解決我的方法，我只是不能看到。 它正在工作，如果我更新整個圖，正如我所說的，但我無法做到這一點mouseover出於顯而易見的原因。
我使用primefaces 6.0具有的Apache Tomcat 8.5
圖片設置的與IDS：http://i.imgur.com/9yTEabE.png
的JavaScript日誌事件的圖片：http://imgur.com/mCgf0BU
我的XHTML文件：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<p:panelGrid columns="2" styleClass="borderless">
<h:graphicImage name="images/logo.gif" />
<h:outputLabel styleClass="h1" value="Diagram Viewer" />
</p:panelGrid>
<f:metadata>
<f:viewAction action="#{dataManager.onLoad}" />
</f:metadata>
</h:head>
<h:body>
<h:form id="tabMenuForm">
<p:menubar styleClass=".ui-menu .ui-menuitem-link"
model="#{dataManager.menuModel}" />
</h:form>
<h:form id="diagramForm">
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="#{resource['images/defaultLoader.gif']}" />
</p:dialog>
<p:tooltip />
<p:diagram id="diagram" value="#{dataManager.model}"
styleClass="borderless" style="#{dataManager.diagramStyle}" var="el">
<f:facet name="element" id="diagramElement" widgetVar="element">
<h:outputLabel>
<p:commandLink
actionListener="#{tooltipManager.onElementClickedTwo()}"
styleClass="commandRemover">
<f:param name="selected" value="#{el.id}" />
<div class="elID">
<h:outputText value="#{el.id}" />
</div>
<div class="elName">
<h:outputText value="#{el.name}" sytleCLass="elName" />
</div>
</p:commandLink>
</h:outputLabel>
<!-- <h:outputText value="#{el.role}" style="display: inline; align-items: right; margin-top:0em;"/> -->
</f:facet>
</p:diagram>
<p:remoteCommand name="elementMouseOver"
actionListener="#{dataManager.onElementMouseOver}" />
<p:remoteCommand name="elementMouseOut"
actionListener="#{dataManager.onElementMouseOut}" />
<h:inputHidden id="someId" value="#{dataManager.selectedId}" />
<script type='text/javascript'>
$('.ui-diagram-element').hover(function(ev) {
var id = $(this).attr('id');
console.log(ev);
var id = $(this).attr('id');
//var inputs = $(this).find('input');
//console.log('INSIDE!' + inputs);
//var input = inputs[0].val();
//var val = $(input).val();
//console.log('VAL: ' + val);
//console.log('INSIDE!' + input);
//var string = '#diagramForm\\:diagram-' + input;
//$(string).addClass('ui-diagram-element-predecessor');
//+ val[i]));
elementMouseOver([ {
name : 'elementId',
value : id
} ]);
//console.log(val);
}, function(ev) {
//***leave***//
var id = $(this).attr('id');
});
</script>
豆的重要部分：
private DiagramNode selected;
private String selectedId = "x";
private List<String> selectedList = new ArrayList<String>();
public String getSelectedId() {
return selectedId;
}
public void setSelectedId(String selectedId) {
this.selectedId = selectedId;
}
public List<String> getSelectedList() {
return selectedList;
}
public void setSelectedList(ArrayList<String> selectedList) {
this.selectedList = selectedList;
}
public void onElementMouseOver() {
String input = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("elementId");
System.out.println("DataManager: Input: " + input);
String[] mouseoverIdSplit = input.split("-", 2);
if (mouseoverIdSplit.length < 2)
return;
System.out.println("DataManager: Mouseover:" + mouseoverIdSplit[1]);
selected = DataLoader.WPCPTaskRows.get(mouseoverIdSplit[1]);
selectedId = mouseoverIdSplit[1];
selectedList = selected.connections;
for (String id : selected.connections) {
System.out.println("Setting StyleClass for " + id);
String elementToUpdate = "diagramForm:diagram-" + id;
System.out.println(elementToUpdate);
RequestContext.getCurrentInstance().update(elementToUpdate);
RequestContext.getCurrentInstance()
.execute("$('#" + elementToUpdate + "').addClass(ui-diagram-element-predecessor);");
}
// RequestContext.getCurrentInstance().update("scriptBean");
// RequestContext.getCurrentInstance().update("someId");
RequestContext.getCurrentInstance().update("diagramForm");
RequestContext.getCurrentInstance().update("diagram");
}
public class DiagramElement implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private String name;
private String id;
private String role;
private String predecessor;
private List<String> predecessorList;
public DiagramElement() {
}
public DiagramElement(String name, String id, String role, String predecessor, List<String> predecessorList) {
this.name = name;
this.id = id;
this.role = role;
this.predecessor = predecessor;
this.predecessorList = predecessorList;
}
+getter and setter