重新排序 Primefaces DataTable onclick答案

【问题标题】：Reorder Primefaces DataTable onclick重新排序 Primefaces DataTable onclick
【发布时间】：2020-09-09 06:08:30
【问题描述】：

我想在点击时执行行切换，如下例所示。 primefaces 允许交换行的唯一方法是让它们可拖动，这对我来说不是一个选项。折腾了一天左右，还是不行。我将不胜感激任何帮助，谢谢！ 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>

【问题讨论】：

如何通过单击重新订购？还是您想要“上移/下移”功能？尝试的 javascript 代码在哪里？并尝试了更新版本的 PF？是的，要使它们在技术上可拖动，它才能发挥作用。您也许可以让它们在技术上是可拖动的，但在功能上不是通过覆盖一些 javascript。
是的，我想要上/下功能。不幸的是，更新版本的 PF 也不是一个选项。用js尝试了不同的方法，但我觉得我没有朝着正确的方向前进。使用假设 jquery 解决方案之一更新了代码（不工作）。
您需要在数据表上配置行排序。否则这个问题根本与primefaces无关，而是一个普通的html/javascript事情（就像你现在在javascript中做的那样。看看datatabke js源是如何完成拖放并伪造的。使用它的低级javascript代码）
为了扩展 Kukeltje 的答案，我通过为每个项目存储一个行号来进行行排序。假设您要将 C 行移到 B 行上方。这相当于从 C 的行号中减去 1，然后在 B 的行号上加 1。然后对显示进行排序和刷新。如果要将 C 行向下移动到 D 行下方，则将 C 的行号加 1 并从 D 中减 1。您的“上移”和“下移”按钮可以调用 bean 方法来执行这些操作。

标签： jsf primefaces primefaces-datatable

【解决方案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>

豆子：

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);
        }
    }
}

【讨论】：