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

发布于 2025-01-08 07:33:48 字数 299 浏览 0 评论 0原文

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

排序：

all up
up
down
all down

以及移动：

all to the right
right
left
all to the left

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

原文

Is there an easy way to change the order of the sort and move buttons from the PrimeFaces picklist?
For better usability i need the buttons to be in this order:

Sort:

all up
up
down
all down

and for moving:

all to the right
right
left
all to the left

I am just the one who implements a dummy page and someone else has to implement as a PrimeFaces Component what i am designing here. So i don't want it to be a impossible task for the programmer.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只为一人 2025-01-15 07:33:48

没有内置的 ButtonTemplate 功能，但您可以使用 css 更改顺序。

代码：

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

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

->这就是“擎天柱”所说的。他在 Prime Faces 论坛上对我的问题的回答

There is no built-in buttonTemplate feature, you can change the order with css though.

Code:

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

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

-> This is what 'Optimus Prime' says. His answer in the Prime Faces Forum on my question

回复收藏 0 原文

内心激荡 2025-01-15 07:33:48

你可以尝试使用 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 方法的位置，然后重新排序按钮...

尽管您每次想要升级时都必须重新修补它

回复收藏 0 原文

梦在深巷 2025-01-15 07:33:48

我遇到了同样的问题，但在不同的屏幕上仍然遇到像素问题。

使用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

I am the same problem but still got pixel issues with different screens.

Using flexbox should be better than px change:

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

Example: https://codepen.io/Frank_Worker/pen/abzYmYr

回复收藏 0 原文

~没有更多了~