如何重新排序 p:orderList 控制器按钮？

Question

我正在使用 primefaces 5.0 ，并尝试重新排序 P:orderList 控制按钮。

谁能回答我的问题.

Answer 1

您可以选择的是

• 使用 jquery dom 操作
• 修改 PrimeFaces 组件的源并使用该自定义版本
• 使用CSS

最后一个有效，第一个有效（我相对经常使用 jquery dom 操作），中间可以工作，但可能会成为维护噩梦

CSS 示例：

.ui-orderlist .ui-button.ui-orderlist-button-move-top {
    top: -30px !important;
}

.ui-orderlist .ui-button.ui-orderlist-button-move-up {
    top: 30px !important;
}

请记住，最终，PrimeFaces 只是 html、css 和 javascript（使用 jquery）

Answer 2

针对现代浏览器的稍微简洁的 CSS 解决方案 - 这是针对 PrimeVue 的，但我假设 PrimeFaces 使用类似的布局：

.p-orderlist-controls {
    display: flex;
    flex-direction: column;

    button[data-pc-section="moveupbutton"] {
        order: 2;
    }

    button[data-pc-section="movetopbutton"] {
        order: 1;
    }

    button[data-pc-section="movedownbutton"] {
        order: 3;
    }

    button[data-pc-section="movebottombutton"] {
        order: 4;
    }
}