窗口弹出窗口而不是主要面中单个选定行中的对话框

时间:2014-05-19 09:13:59

标签: jquery primefaces

我想在primefaces中使用弹出窗口而不是对话框。如何调用弹出窗口事件。我在jquery funcution中调用窗口弹出窗口,但是jquery不知道id =" cars" p:dataTable。如何在我的代码中从jquery.Look调用p:dataTable的行,如下所示。

<script type="text/javascript">
  jQuery(function($) {
     $('#cars tr').dblclick(
        function() {
              var securities_id = $(this).attr('id');           
              window.showModalDialog("/view/Login Entry Input.html");       
         });
   });
</script>


<h:form id="form">

<p:growl id="growl" showDetail="true"/>

<p:dataTable id="cars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10"
             selection="#{tableBean.selectedCar}" selectionMode="single">

   <!--  <p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
                update=":form:display :form:growl" />
    <p:ajax event="rowUnselect" listener="#{tableBean.onRowUnselect}" update=":form:growl"/> -->

    <f:facet name="header">
        Select a row to display a message
    </f:facet>

    <p:column headerText="Model">
        #{car.model}
    </p:column>

    <p:column headerText="Year">
        #{car.year}
    </p:column>

    <p:column headerText="Manufacturer" >
        #{car.manufacturer}
    </p:column>

    <p:column headerText="Color">
        #{car.color}
    </p:column>
</p:dataTable>

1 个答案:

答案 0 :(得分:0)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--***********************************************************************
 * $Date: 2013-11-13 $
 * $Author:  [Zayar Htet] $
 * $Rev 1.0 $
 * Copyright (c) 2013 DIR-ACE Technology Ltd. All Rights Reserved.
 ***********************************************************************-->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/layout/commonTemplate.xhtml">
    <ui:define name="head">
        <script src="../javascript/tdLo.js" type="text/javascript"></script>
        <script type="text/javascript"> 

        var  count = 0;     

    $(function(){
            $(document.getElementById('form:cars_data')).on('click', '.ui-datatable-selectable', function(){

                timerID = setInterval(function(){               
                if( document.getElementById("form:test").value != "dd" )    {               
                    window.showModalDialog("http://localhost:8080/sts/view/OrderQuote.seam","Dialog Box Arguments # 1","dialogHeight: 565px; dialogWidth: 609px; dialogTop: 0px; dialogLeft: 0px; edge: Raised; center: Yes; resizable: no; status: Yes;");
                    clearInterval(timerID);
                    timerID = null;
                    }

                },200)
                ;

                });
            });  

    </script>
    </ui:define>
    <ui:define name="title">
        <!-- Screen title label-->
        List of Product
    </ui:define>
    <div>
        <ui:define name="body">
            <h:form id="form">

                <p:growl id="growl" showDetail="true" />

                <p:dataTable id="cars" var="car"
                    value="#{tableBean.mediumCarsModel}" rows="10"
                    selection="#{tableBean.selectedCar}" selectionMode="single">
                    <p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
                        immediate="true" update=":form:test" />

                    <p:column headerText="Model">
                        #{car.model}
                    </p:column>

                    <p:column headerText="Year">
           #{car.year}
        </p:column>

                    <p:column headerText="Manufacturer">
            #{car.manufacturer}
        </p:column>

                    <p:column headerText="Color">
            #{car.color}
        </p:column>
                </p:dataTable>

                <h:inputHidden id="test" value="#{tableBean.selectedCar.model}" style="diplay:none;"/>
            </h:form>


        </ui:define>
    </div>
</ui:composition>

这是我的p:datatable所选行的完整代码,带有弹出窗口。 1.如果单击行,表行选择javascript函数运行 2.我使用setInterval等待p:ajax监听器事件完成(选择数据库数据)并将我的数据绑定到我的显示页面。 3.immediate =&#34;真&#34;在p:ajax中更改h:输入隐藏值。 4.如果h:输入隐藏值更改,setInterval方法显示我的窗口弹出窗口。 :)