更新某些 Primefaces 图表元素答案

【问题标题】：Updating certain Primefaces Diagram Element更新某些 Primefaces 图表元素
【发布时间】：2017-03-25 09:34:03
【问题描述】：

从 2 天以来，我一直在尝试解决我的 primefaces 图实现遇到的问题。我想“鼠标悬停”图表元素，突出显示与该元素连接的其他元素。我让它工作，但只有当我更新元素时更新整个图表/表单。这种方法有两个问题。首先，在 mouseover 上不断更新 mouseenter 和其他东西上的所有绑定，被重置，所以尽管我刚刚进入，但我一直在触发事件。由于不断的调用，80% 的时间我都没有捕捉到 mouseleave / hover leave 事件。我也不能再滚动图表了，因为鼠标悬停的不断更新会重置滚动。 ;-)

所以我尝试只更新我在鼠标悬停时实际更改的图表元素，但我找不到适合我的方法...

我尝试通过 primefaces RequestContect.update 更新元素我使用了 Id 的所有变体，例如： 1-0201 图1-0201 图：diagram-1-0201

我尝试了从 primefaces 执行的 javascript 查询。我在那个上遇到了一个 ui can't be resolved 错误。虽然相同的查询适用于 xhtml。我也想不出那个错误。虽然我不认为这会有所帮助，因为同样的代码在 html 文件中执行时也不起作用。

我尝试将连接保存在图表元素值中，然后通过元素上的隐藏输入访问该值。我在我的 javascript 中获得了连接元素的 id，但我也无法通过 javascript 更新元素。 “内部”（剩余的注释代码）是我在存储连接的 Element 变量上引用的隐藏输入的变量）我在 javascript 中同时获得了列表和单个连接的 id，但无法更新元素。

我在 javascript 方面没有那么丰富的经验。几天前我第一次使用它。

那么如何在不重新加载孔图的情况下更新primefaces图中某些元素的样式呢？必须有一种非常简单的方法来做到这一点，或者有一种简单的方法来解决我看不到的方法。如果我按照我所说的那样更新整个图表，它会起作用，但由于显而易见的原因，我不能在鼠标悬停时这样做。

我正在使用 primefaces 6.0 和 apache tomcat 8.5

带有 id 的设置图片：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>

Bean 的重要部分：

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

【问题讨论】：

标签： javascript jsf primefaces

【解决方案1】：

经过 10 多个小时的疯狂之后，我终于让它工作了。我在 javascript 中连接的 ID 字符串不正确。我还必须在字符串中添加 3 \\，因为 1 被作为转义符吞下，我需要 2 来让 javascript 函数找到其中包含“：”的元素。

这是我最后的做法：

<h:inputHidden value="#{el.predecessorList}" />
$('.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(inputs);
                            var input = inputs[1];
                            //var val = $(input).val();
                            //console.log('VAL: ' + val);
                            var array = input.value;
                            console.log(array);
                            var parsedArray = array.replace("[", "").replace("]",
                                    "").replace(/\s/g, "").split(',');
                            for ( var pos in parsedArray) {
                                var str1 = '#diagramForm\\\:diagram-';
                                var str2 = parsedArray[pos];
                                console.log(str2);
                                var con = str1.concat(str2);
                                console.log(con);
                                $(con).addClass('ui-diagram-element-predecessor');
                            }
                        },
                        function(ev) {
                            //***leave***//
                            var id = $(this).attr('id');
                            console.log(ev);
                            var id = $(this).attr('id');
                            var inputs = $(this).find('input');
                            console.log(inputs);
                            var input = inputs[1];
                            //var val = $(input).val();
                            //console.log('VAL: ' + val);
                            var array = input.value;
                            console.log(array);
                            var parsedArray = array.replace("[", "").replace("]",
                                    "").replace(/\s/g, "").split(',');
                            for ( var pos in parsedArray) {
                                var str1 = '#diagramForm\\\:diagram-';
                                var str2 = parsedArray[pos];
                                console.log(str2);
                                var con = str1.concat(str2);
                                console.log(con);
                                $(con).removeClass('ui-diagram-element-predecessor');
                            }
    });

【讨论】：