使用Tab键,单击或双击PrimeFaces可编辑数据表上的导航

时间:2014-10-24 09:03:03

标签: jquery jsf primefaces datatable

基本上我想启用键盘选项卡键并单击PrimeFaces 4.0数据表单元格。

此问题已被描述为PrimeFaces issue 6310,但通过showcase labs提供的解决方案已被破解,显然不再有展示实验室了

<p:remoteCommand name="newRow" update="Tbl"  id="rmC"/>

<p:dataTable value="${emps}" widgetVar="wTblempl"
             var="emp" id="Tbl" filterEvent="keydown"
             editable="true" editMode="cell" rowIndexVar="rowIndex"
             scrollHeight="120" scrollable="true">
    <p:ajax event="cellEdit" listener="${Controller.addRow}"
            oncomplete="newRow()"/>

    <p:column headerText="Last Name">
        <p:cellEditor>
            <f:facet name="output">
                <h:outputText value="${emp.lastname}"/>
            </f:facet>
            <f:facet name="input">
                <p:inputText value="${emp.lastname}" tabindex="1"/>
            </f:facet>
        </p:cellEditor>
    </p:column>
    <p:column headerText="Department">
        <p:cellEditor>
            <f:facet name="output">
                <h:outputText  value="${emp.firstname}" />
            </f:facet>
            <f:facet name="input">
                <p:inputText value="${emp.firstname}"/>
            </f:facet>
        </p:cellEditor>
    </p:column>
    <p:column headerText="Gender">
        <p:cellEditor>
            <f:facet name="output">
                <h:outputText  value="${emp.gender}"/>
            </f:facet>
            <f:facet name="input">
                <p:selectOneMenu value="${emp.gender}" >
                    <f:selectItem itemLabel="Male" itemValue="M" />
                    <f:selectItem itemLabel="Female" itemValue="F" />

                </p:selectOneMenu>
            </f:facet>
        </p:cellEditor>
    </p:column>
    <p:column headerText="Status">
        <p:cellEditor>
            <f:facet name="output">
                <h:outputText  value="${emp.status}"/>
            </f:facet>
            <f:facet name="input">
                <p:selectOneMenu   value="${emp.status}" editable="true">
                    <f:selectItem itemLabel="active" itemValue="active" />
                    <f:selectItem itemLabel="Suspended" itemValue="Suspended"/>
                    <f:selectItem itemLabel="Leave" itemValue="Leave" />
                </p:selectOneMenu>
            </f:facet>
        </p:cellEditor>
    </p:column>
</p:dataTable>

更新:

我需要添加一行正常工作,但当我插入时,它会失去焦点......

public void addRow(CellEditEvent event) {

    log.info("1 add");
    int r = event.getRowIndex();

    RequestContext context = RequestContextHolder.getRequestContext();
    List<Employee> list = (List<Employee>) context.getConversationScope().get("emp");

    if (list.size() == 1 || (r + 1) == list.size()) {

      ((List<Employee>) context.getConversationScope().get("emp")).add(new Employee());

    }
    log.info("added");
}

更新2:

我需要点击行的第一个单元格,键入,(工作)然后选项卡到下一个单元格(正常工作),但是除非我刷新(F5)页面

1 个答案:

答案 0 :(得分:0)

似乎最容易在客户端使用JavaScript解决这个问题。

您可以使用JavaScript拦截几乎所有鼠标和键盘事件(输入),请参阅w3schools JavaScript HTML DOM Events

通过拦截onmousedown,onmouseup和onclick事件,您可以阻止它们触发数据表更新/刷新代码。这个更新代码很可能会让你失去焦点。此外,使用JS您可能只是在更新代码运行后重新设置焦点 - 但这可能会导致在页面刷新之前无法重新聚焦的问题。