Question

How could I update a single row in a p:datatable when using AJAX?

I don't want to update the whole datatable because it has a lot of rows and it's going to take some time..

My layout:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
  let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!

  if(tableView == firstTableView)   {
     //code for first table view 
  }

  if(tableview == secondTableView)      {
     //code for secondTableView 
  }

  return cell
}

I've tried out some things like update = "clearance" etc but it doesn't seem to work.

I'm using JSF 2.1 and Primefaces 5.2

Answer 1

您可以使用@row(n)搜索表达式来执行此操作 - 它会更新表中的第n行。要更新当前行，您需要将行索引作为参数传递。在rowIndexVar="rowIdx"上设置<p:dataTable>属性，然后：

<p:commandButton ... update="@form:visitTable:@row(#{rowIdx})" />

Answer 2

不知道我参加聚会是否迟到，但是让我在这个问题上给我5美分，关于如何仅使用PrimeFaces的纯ajax功能来更新一行的内容。

1）部分更新：我使用PF更新特定行中某些内容的第一种方法不是完全更新整个行，而是更新行内感兴趣的区域。这可以通过仅定义固定面板并对其进行更新来实现。例如：

<h:form id="testForm">
    <p:dataTable id="myEntityTable" var="myEntity" value="#{myController.allEntities}">

        <p:column headerText="id">
            <h:outputText value="#{myEntity.id}"/>
        </p:column>

        <p:column headerText="last update">
            <p:outputPanel id="lastUpdatePanel">
                <h:outputText value="#{myEntity.lastUpdate}">
                    <f:convertDateTime pattern="HH:mm:ss" type="date" />
                </h:outputText>
            </p:outputPanel>
        </p:column>

        <p:column headerText="counter">
            <p:outputPanel id="counterPanel">
                <h:outputText value="#{myEntity.counter}"/>
            </p:outputPanel>
        </p:column>

        <p:column headerText="increment">
            <p:commandButton value="+"
                actionListener="#{myController.increment(myEntity)}"
                update="counterPanel, lastUpdatePanel"/>
        </p:column>
    </p:dataTable>
</h:form>

技巧是更新目标面板（在此示例中为片段update="counterPanel, lastUpdatePanel"）。这将导致如下图所示：

2）实际更新该行：很多时候，前一种方法工作得很好。但是，如果确实需要更新该行，则可以遵循先前答案之一中给出的建议，并使用@row关键字：

<h:form id="testForm">
    <p:dataTable id="myEntityTable" var="myEntity" value="#{myController.allEntities}" rowIndexVar="rowIndex">

        <p:column headerText="id">
            <h:outputText value="#{myEntity.id}"/>
        </p:column>

        <p:column headerText="last update 1">
            <p:outputPanel>
                <h:outputText value="#{myEntity.lastUpdate}">
                    <f:convertDateTime pattern="HH:mm:ss" type="date" />
                </h:outputText>
            </p:outputPanel>
        </p:column>

        <p:column headerText="last update 2">
            <h:outputText value="#{myEntity.lastUpdate}">
                <f:convertDateTime pattern="HH:mm:ss" type="date" />
            </h:outputText>
        </p:column>

        <p:column headerText="counter">
            <p:outputPanel>
                <h:outputText value="#{myEntity.counter}"/>
            </p:outputPanel>
        </p:column>

        <p:column headerText="increment">
            <p:commandButton value="+"
                actionListener="#{myController.increment(myEntity)}"
                update="@form:myEntityTable:@row(#{rowIndex})"/>
        </p:column>
    </p:dataTable>
</h:form>

诀窍是保留p:outputPanel内各列中的每个内容，然后让update="@form:myEntityTable:@row(#{rowIndex})"完成工作。为了说明这一点，我有意识地将“ last update 2”列保留为没有outputPanel：

因此，在单击“ +”后，“上次更新1”和“计数器”列实际上进行了更新，而“上次更新2”列保持不变。因此，如果您需要更新内容，请用outputPanel将其包装起来。同样值得注意的是，保存每一列内容的outputPanels不需要显式的ID（如果需要，可以添加一个）。为了完整起见，在这些示例中，我使用了PF 6.2。 backbean非常简单：

package myprefferedpackage;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class MyController {

    private List<MyEntity> entities;

    @PostConstruct
    public void init() {
        this.entities = new ArrayList<MyEntity>(10);
        for(int i = 0; i < 10; ++i) {
            this.entities.add(new MyEntity(i));
        }
    }

    public List<MyEntity> getAllEntities() {
        return entities;
    }

    public void increment(MyEntity myEntity) {
        myEntity.increment();
    }

    public class MyEntity {
        private int id;
        private int counter;
        private Date lastUpdate;

        public MyEntity(int id) {
            this.id = id;
            this.counter = 0;
            this.lastUpdate = new Date();
        }

        public void increment() {
            this.counter++;
            this.lastUpdate = new Date();
        }

        public int getId() {
            return id;
        }

        public int getCounter() {
            return counter;
        }

        public Date getLastUpdate() {
            return lastUpdate;
        }
    }
}

Answer 3

使用＆＃39; ajax＆＃39;像OmniFaces这样的实用程序库的功能，或者对PrimeFaces Selectors具有创造性。

在这两种情况下，您都需要访问例如当前的＆＃39; row或rowId。但既然你有行中的按钮，那应该不是问题。遗憾的是，我没有时间为您创建示例

Answer 4

我尝试使用uptate =“ @parent：componentAnotherColumn”并工作。只更新同一行

 <p:column>    
       <p:selectBooleanCheckbox value="#{atributoVar.booleanValue}">
            <p:ajax process="@this" update="@parent:componentAnotherColumn"/>
       </p:selectBooleanCheckbox>
 </p:column>
 <p:column>                            
     <p:selectBooleanCheckbox id="componentAnotherColumn" value="#{!atributoVar.booleanValue}"/>
 </p:column>

Update single row in JSF / Primefaces datatable using AJAX

4 个答案: