Question

是否有一种简单的方法可以更改排序顺序并从PrimeFaces选项列表中移动按钮？为了更好的可用性，我需要按钮按此顺序：

类别：

all up
up
down
all down

和移动：

all to the right
right
left
all to the left

我只是实现虚拟页面的人，而其他人必须实现我在这里设计的PrimeFaces组件。所以我不希望它对程序员来说是一项不可能完成的任务。

Answer 1

没有内置的buttonTemplate功能，你可以用css改变顺序。

代码：

.ui-picklist-button-add {
    position:relative;
    top:25px;
}

.ui-picklist-button-add-all {
    position:relative;
    top:-40px;
}

- ＆GT;这就是'擎天柱'所说的。他在我的问题上在Prime Faces论坛上的回答

Answer 2

您可以尝试使用jQuery：JavaScript moving element in the DOM

使用firebug查找按钮及其容器的所有类

例如尝试jQuery(".ui-picklist-target-controls .ui-picklist-button-move-top").insertAfter(".ui-picklist-target-controls .ui-picklist-button-move-top");

如果要修补primefaces jar，请查看PickListRenderer.java文件，看看他们使用encodeButton方法的位置，然后重新订购按钮......

虽然每次你想要升级时都必须重新修补

Answer 3

我是同一个问题，但在不同的屏幕上仍然遇到像素问题。

使用flexbox胜过px更改：

.ui-picklist-buttons-cell{
  display: flex;
  flex-direction: column;
}

.ui-picklist-button-add {
  order:2;
}
.ui-picklist-button-add-all {
  order:1;
}
.ui-picklist-button-remove {
  order:3;
}
.ui-picklist-button-remove-all {
  order:4;
}

示例：https://codepen.io/Frank_Worker/pen/abzYmYr

如何更改primeFaces选项列表按钮的顺序

3 个答案: