在对另一个单元格的 cellEdit 事件进行 ajax 调用后无法更新 p:datatable 单元格

Question

在我的支持 bean 中的单元格编辑事件中，如果单元格值发生更改，我想更新另一列的值以及数据表的值。该值已在我的列表对象中正确设置，但未反映在我的数据表中。我也尝试使用 RequestContext 使用数据表进行更新，但列表仍然没有刷新。我究竟做错了什么？我应该为此更改调用任何行事件吗？

代码 sn-p：

豆子

@Named("editView")
@ViewScoped

public class EditTableView implements Serializable {


    private List<Cars> carList;
    private List<String> brands;

    @PostConstruct
    public void init() {

        brands = new ArrayList<String>();
        brands.add("BMW");
        brands.add( "Mercedes");
        brands.add("Volvo");
        brands.add("Audi");
        brands.add("Renault");
        brands.add("Fiat");
        brands.add("Volkswagen");
        brands.add("Honda");
        brands.add("Jaguar");
        brands.add( "Ford");
        brands.add("Maruti Suzuki");

        carList = new ArrayList<Cars>();
        modifiedList = new ArrayList<Cars>();
        Cars car =new Cars();
        car.setCarId(1);
        car.setBrand("BMW");
        car.setColor("Grey");
        car.setModelNumber("2323");
        car.setSelfDriven("Y");
        car.setYear("1980");
        car.setStatus("");

        carList.add(car);               
    }




    public void onCellEdit(CellEditEvent event) {

        int rowIndex = event.getRowIndex();
        Cars car = null;
        LOGGER.info("Car Edited"+rowIndex);

        Object oldValue = event.getOldValue();
        Object newValue = event.getNewValue();

        DataTable carTable = (DataTable)   event.getSource();
        String index = carTable.getClientId(FacesContext.getCurrentInstance());
        LOGGER.info(index);

        if(newValue != null && !newValue.equals(oldValue)) {
            LOGGER.info("Cell Changed Old: " + oldValue + ", New:" + newValue);
            car=carList.get(rowIndex);    
            carList.get(event.getRowIndex()).setStatus("Changed");      
            modifiedList.add(car);
        }
    }    
}

xhtml

<h:form id="cellEditForm">

    <p:dataTable id="cars" var="car" value="#{editView.carList}"
        editable="true" editMode="cell" widgetVar="cellCars">
        <f:facet name="header">Cell Editing</f:facet>

        <p:ajax event="cellEdit" listener="#{editView.onCellEdit}"
            update=":cellEditForm:cars" />

        <p:column headerText="Id">
            #{car.carId}
        </p:column>

        <p:column headerText="Model Name" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.modelNumber}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText id="modelInput" value="#{car.modelNumber}"
                        style="width:96%" />
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Year" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.year}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.year}" style="width:96%" label="Year" />
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Brand" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.brand}" />
                </f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.brand}" style="width:100%">
                        <f:selectItems value="#{editView.brands}" var="man"
                            itemLabel="#{man}" itemValue="#{man}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Self Driven" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.selfDriven}" />
                </f:facet>
                <f:facet name="input">
                    <p:inplace>
                        <p:inputText value="#{car.selfDriven}" />
                    </p:inplace>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Color" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.color}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.color}" style="width:96%" label="Color" />
                </f:facet>
            </p:cellEditor>
        </p:column>


        <p:column>
            <h:outputText value="#{car.status}" id="statusLabel"></h:outputText>

        </p:column>
    </p:dataTable>

</h:form>

Answer 1

我最终使用了 jquery。获取更新行的索引并从我的 bean 中调用 jquery 函数。

RequestContext requestContext = RequestContext.getCurrentInstance();
String call = "updateCell(" + event.getRowIndex() + ")";
requestContext.execute(call);

jQuery 代码

function updateCell(i) {
   var index =  "cellEditForm:cars:"+i+":statusLabel";  
   document.getElementById(index).innerHTML="Changed";
}

Answer 2

OmniFaces 有一个很好的工具，叫做'Ajax'

关于这个的 StackOverflow 帖子展示了如何使用它：How to use OmniFaces Ajax.updateColumn() or Ajax.updateRow() via p:ajax

Answer 3

更新表格而不是表格或将表格放入面板并更新面板。

为了安全

<h:form id="cellEditForm">
<p:panel id="something" styleclass="pero">
   <p:dataTable id="cars

update="@(.pero)"

请务必将 id 放在面板上，因为类更新会搜索该 id 并使用它。这个解决方案是因为我不知道其余的代码，它适用于任何代码。