单击"重新排序Primefaces DataTable"

Question

我想执行行切换onclick，就像下面的例子一样。素数允许交换行的唯一方法是让它们可以拖动，这对我来说不是一个选择。戳了大约一天，运气不好。如果有任何帮助，我将不胜感激，谢谢！PF 6.1版。

function moveUp(id){
let element = $("tr").find(`[data-ri='${id}']`);
element.prev().before(element);
}
function moveDown(id){
let element = $("tr").find(`[data-ri='${id}']`);
element.next().after(element);
}
<p:dataTable id="prices-table" var="price" value="#{Bean.prices}">
<p:ajax event="rowReorder" listener="#{Bean.onPriceReorder}"
update="prices-table" />
<p:column style="width:16px">
<p:commandButton update="prices-table" onclick="moveUp()">up</p:commandButton>
<p:commandButton update="prices-table" onclick="moveDown()">down</p:commandButton>
</p:column>
<p:column headerText="Title">
<h:outputText value="#{price.title}" />
</p:column>
</p:dataTable>

Answer 1

谢谢，我在没有任何JS的情况下完成了这项工作，为任何可能偶然发现这个问题的人发布了代码。JSF:

<p:dataTable id="prices-table" var="price" value="#{Bean.prices}">
<p:column style="width:16px">
<p:commandButton update="@form" actionListener="#{Bean.movePrice(price, 'up')}">up</p:commandButton>
<p:commandButton update="@form" actionListener="#{Bean.movePrice(price, 'down')}">down</p:commandButton>
</p:column>
<p:column headerText="Title">
<h:outputText value="#{price.title}" />
</p:column>
<p:column headerText="Amount">
<h:outputText value="#{price.amount}">
<f:convertNumber minFractionDigits="2" type="currency" currencySymbol="$" />
</h:outputText>
</p:column>

Bean：

public void movePrice(Price price, String direction) {
int orderPosition = price.getOrderPosition();
boolean isPricesSwapped = false;
if (direction.equals("up") && orderPosition != 0) {
Collections.swap(prices, orderPosition - 1, orderPosition);
isPricesSwapped = true;
}
if (direction.equals("down") && orderPosition != prices.size()) {
Collections.swap(prices, orderPosition, orderPosition + 1);
isPricesSwapped = true;
}
if (isPricesSwapped) {
for (int i = 0; i < prices.size(); i++) {
price = prices.get(i);
price.setOrderPosition(i);
}
}
}