primefaces数据表中的Timepicker不起作用

时间:2015-08-18 21:38:23

标签: jsf primefaces datatable timepicker

我有两个时间选择器,一个在primefaces数据表(txtTime)之外,它可以工作 但是一个内部数据表(txtEmpAttendTime)不起作用,为什么??

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Facelet Title</title>
    <link href="css/jquery-ui.min.css" rel="stylesheet" />
    <script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#form\\:txtTime").timepicker();
            $("#form\\:dtAttendance\\:0\\:txtEmpAttendTime").timepicker();
    });
    </script>
</h:head>
<h:body>
    <h:form id="form" dir="rtl">
        <h:messages id="messages" />
        <h:outputText id="informationMessage"
                      value="#{recordAttendanceBacking.infoMessage}"
                      rendered="#{recordAttendanceBacking.infoMessage ne null}" />
        <h:inputText readonly="true" id="txtTime"/>
        <p:outputLabel for="dtpAttendanceDate" value="date" />
        <p:calendar id="dtpAttendanceDate" value="#{recordAttendanceBacking.selectedDate}" pattern="dd-MM-yyyy" mask="true"  lang="ar"/>
        <p:outputLabel for="centers" value="center"/>
        <h:selectOneMenu id="centers" value="#{recordAttendanceBacking.selectedCenter}" converter="centerConverter">
            <f:selectItems value="#{recordAttendanceBacking.centerList}" var="center"
                           itemLabel="#{center.centerName}"
                           itemValue="#{center}" />
            <f:ajax event="change" listener="#{recordAttendanceBacking.centerChanged}" execute="centers" render="employees dtAttendance messages" />
        </h:selectOneMenu >
        <p:outputLabel for="employees" value="emplyee"/>
        <h:selectOneMenu id="employees" value="#{recordAttendanceBacking.selectedEmployee}" converter="employeeConverter">
            <f:selectItems value="#{recordAttendanceBacking.employeeList}" var="employee"
                           itemLabel="#{employee.empName}"
                           itemValue="#{employee}"/>
            <f:ajax event="change" listener="#{recordAttendanceBacking.employeeChanged}" execute="employees" render="dtAttendance messages" />
        </h:selectOneMenu>
        <p:dataTable id="dtAttendance" var="emp" editable="true" value="#{recordAttendanceBacking.attendanceList}">
            <p:ajax event="rowEdit" listener="#{recordAttendanceBacking.onRowEdit}" update=":form:messages" />
            <p:ajax event="rowEditCancel" listener="#{recordAttendanceBacking.onRowCancel}" update="form:messages" />

            <p:column headerText="employee name">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{emp.empId.empName}" /></f:facet>
                    <f:facet name="input"><h:outputText value="#{emp.empId.empName}" /></f:facet>
                </p:cellEditor>
            </p:column>
            <p:column headerText="employee attend time">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{emp.empAttendTime}" /></f:facet>
                    <f:facet name="input"><h:inputText id="txtEmpAttendTime" value="#{emp.empAttendTime}" /></f:facet>
                </p:cellEditor>                    
            </p:column>
            <p:column headerText="leave time">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{emp.empLeaveTime}" /></f:facet>
                    <f:facet name="input"><h:inputText readonly="true" id="txtEmpLeaveTime"/></f:facet>
                </p:cellEditor>                    
            </p:column>
            <p:column headerText="attend time">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{emp.attendTime}" /></f:facet>
                    <f:facet name="input"><p:inputText value="#{emp.attendTime}" /></f:facet>
                </p:cellEditor>                    
            </p:column>
            <p:column headerText="time in minutes">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{emp.permittedTimeInMinutes}" /></f:facet>
                    <f:facet name="input"><p:inputText value="#{emp.permittedTimeInMinutes}" /></f:facet>
                </p:cellEditor>                    
            </p:column>
            <p:column style="width:32px">
                <p:rowEditor />
            </p:column>
        </p:dataTable>
        <p:commandButton value="Add" update="dtAttendance" action="#{recordAttendanceBacking.addNewRow()}" />

    </h:form>
</h:body>

当用户编辑primefaces数据表行时,他应该能够从jquery timepicker插件中选择时间,该插件可以在数据表外部使用inputText正常工作,但在行编辑模式下它不适用于inputText。

0 个答案:

没有答案