更新某些Primefaces图元素

时间:2017-03-25 00:53:02

标签: javascript jsf primefaces

我正在尝试用2天时间来解决我使用primefaces图实现的问题。 我希望“鼠标悬停”图元素,突出显示与该元素连接的其他元素。 我有它工作,但只有当我更新元素时​​更新整个图表/表单。 我对这种方法有两个问题。 首先在鼠标悬停时不断更新所有对mouseenter和其他东西的绑定,然后重置,所以尽管我刚刚输入,但我一直在触发事件。由于常量调用,80%的时间我都没有捕获mouseleave / hover离开事件。 此外,我不能再滚动图表,因为鼠标悬停的不断更新将重置滚动。 ; - )

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

我尝试通过primefaces RequestContect.update更新元素 我在Id上使用了所有变体: 1-0201 图-1-0201 图:图-1-0201

我尝试了从primefaces执行的javascript查询。我得到了一个无法解决的错误。虽然相同的查询适用于xhtml。我也无法弄清楚那个错误。虽然我不认为它会有所帮助,因为同样的代码在html文件中执行时也不起作用。

我尝试在图元素值中保存连接,然后通过元素上的隐藏输入访问此值。我在我的javascript中获得了连接元素的id,但我无法通过javascript更新元素。 “inside”(剩余的注释代码)是我在存储连接的Element变量上引用的隐藏输入的变量。 我在javascript中获得了列表和单个连接的ID,但无法设法更新元素。

我不是那种经验丰富的javascript。我几天前第一次使用它。

那么如何在不重新加载孔图的情况下更新primefaces图中某些元素的样式? 必须有一个非常简单的方法来完成它或一个简单的方法来修复我的方法,我只是看不到。 如果我像我说的那样更新整个图表,它正在工作,但由于显而易见的原因,我无法在鼠标悬停时这样做。

我正在使用带有apache tomcat 8.5的primefaces 6.0

带有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

1 个答案:

答案 0 :(得分:0)

经过超过10个小时的精神错乱,我终于开始工作了。 我在javascript中正确连接了ID的字符串。 此外,我不得不在字符串中添加3 \\,因为1被吞下作为转义,我需要2个javascript函数才能找到带有&#34;的元素:&#34;在里面。

以下是我最终的表现:

<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');
                            }
    });