Fatal编程技术网
  • javascript/
  • Javascript 更新某些Primefaces图元素

Javascript 更新某些Primefaces图元素

javascript jsf primefaces

Javascript 更新某些Primefaces图元素,javascript,jsf,primefaces,Javascript,Jsf,Primefaces,从两天开始，我一直在努力解决primefaces图实现中遇到的一个问题。 我想在“mouseover”图元素上，突出显示与该元素连接的其他元素。 我让它工作，但只有当我更新元素时更新整个图表/表单。 这种方法有两个问题。 首先，随着mouseenter和其他东西上的所有绑定上的mouseover的不断更新，会被重置，所以尽管我刚刚输入，但我一直都会触发事件。还有80%的时间，我没有捕捉到mouseleave/hover-leave事件，因为不断的呼叫。 此外，我无法再滚动图表，因为鼠标上的持续更

从两天开始，我一直在努力解决primefaces图实现中遇到的一个问题。 我想在“mouseover”图元素上，突出显示与该元素连接的其他元素。 我让它工作，但只有当我更新元素时更新整个图表/表单。 这种方法有两个问题。 首先，随着mouseenter和其他东西上的所有绑定上的mouseover的不断更新，会被重置，所以尽管我刚刚输入，但我一直都会触发事件。还有80%的时间，我没有捕捉到mouseleave/hover-leave事件，因为不断的呼叫。 此外，我无法再滚动图表，因为鼠标上的持续更新会重置滚动。；-）

所以我试图只更新我在mouseover上实际更改的图表元素，但我找不到一种适合我的方法

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

我尝试了从primefaces执行的javascript查询。我有一个用户界面无法解决的错误之一。尽管相同的查询在xhtml上工作。我也无法找出那个错误。虽然我不认为这会有帮助，因为同样的代码在html文件中执行时也不起作用

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

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

那么，如何在不重新加载孔图的情况下更新primefaces图中某些元素的样式呢？ 必须有一个非常简单的方法来做这件事，或者有一个简单的方法来修复我的方法，我只是看不到。 如果我像我说的那样更新整个图表是可行的，但是我不能在鼠标上这样做，原因很明显

我将primefaces 6.0与ApacheTomcat 8.5一起使用

带有ID的设置的图片：

事件的javascript日志图片：

我的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>


$（'.ui图表元素'）。悬停（函数（ev）{
var id=$（this.attr（'id'）；
控制台日志（ev）；
var id=$（this.attr（'id'）；
//变量输入=$（this.find（'input'）；
//console.log（'INSIDE！'+输入）；
//var input=inputs[0].val（）；
//var val=$（输入）.val（）；
//console.log（'VAL:'+VAL）；
//console.log（'INSIDE！'+输入）；
//变量字符串='#diagramForm\\：diagram-'+输入；
//$（string）.addClass（'ui-diagram-element-preducer'）；
//+val[i]）；
elementMouseOver（[{
名称：'elementId'，
值：id
} ]);
//控制台日志（val）；
}，功能（ev）{
//***离开***//
var id=$（this.attr（'id'）；
});
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

已选择私有DiagramNode；
私有字符串selectedId=“x”；
private List selectedList=new ArrayList（）；
公共字符串getSelectedId（）{
返回selectedId；
}
public void setSelectedId（字符串selectedId）{
this.selectedId=selectedId；
}
公共列表getSelectedList（）{
返回所选列表；
}
公共无效集合selectedList（ArrayList selectedList）{
this.selectedList=selectedList；
}
public void onElementMouseOver（）{
字符串输入=FacesContext.getCurrentInstance（）.getExternalContext（）.getRequestParameterMap（）.get（“elementId”）；
System.out.println（“数据管理器：输入：“+Input”）；
字符串[]mouseoverIdSplit=input.split（“-”，2）；
如果（鼠标验证分裂长度<2）
返回；
System.out.println（“数据管理器：Mouseover:+mouseoverIdSplit[1]）；
selected=DataLoader.WPCPTaskRows.get（mouseoverIdSplit[1]）；
选择edid=mouseoverIdSplit[1]；
selectedList=selected.connections；
用于（字符串id:选定。连接）{
System.out.println（“为“+id”设置样式类）；
String elementToUpdate=“diagramForm:diagram-”+id；
System.out.println（elementToUpdate）；
RequestContext.getCurrentInstance（）.update（elementToUpdate）；
RequestContext.getCurrentInstance（）
.execute（“$”（“#“+elementToUpdate+”）.addClass（ui图表元素前置项）；”；
}
//RequestContext.getCurrentInstance（）.update（“scriptBean”）；
//RequestContext.getCurrentInstance（）.update（“someId”）；
RequestContext.getCurrentInstance（）.update（“diagramForm”）；
RequestContext.getCurrentInstance（）更新（“图表”）；
}
公共类DiagrameElement实现可序列化{
/**
* 
*/
私有静态最终长serialVersionUID=1L；
私有字符串名称；
私有字符串id；
私有字符串角色；
私有字符串前置；
私人名单先人名单；
公共diagrameElement（）

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