ZK在列表框中重新排序 [英] ZK Reordering in Listbox
问题描述
我想在zk中使用 listitem 的重新排序当我们在 zul 文件中定义标签(listitem,listcell)时,我们怎么做呢。我不这样做想要使用 ListitemRenderer 。这里我找到了一些东西,但可能是他们没有更新事情
I will want to use reordering of listitem in zk How can we do it when we have define tags(listitem,listcell) inside the zul file .I do Not want to use ListitemRenderer.Here i found something but may be they are not updating things
推荐答案
列表框重新排序列
可以找到以下示例在 zk小提琴上。
这是我们稍后扩展到弹出窗口的第一个例子。
简单的观点:
First a dnd example that we extend to the popup way later.
The simple view:
<window apply="test.LboxViewCtrl">
<listbox id="lbox">
<listhead id="lHead">
<listheader draggable="head" droppable="head" label="Col A" />
<listheader draggable="head" droppable="head" label="Col B" />
<listheader draggable="head" droppable="head" label="Col C" />
</listhead>
<auxhead>
<auxheader colspan="3">
<button id="reorderBtn" label="Reorder" />
</auxheader>
</auxhead>
<listitem>
<listcell label="A1" />
<listcell label="B1" />
<listcell label="C1" />
</listitem>
<listitem>
<listcell label="A2" />
<listcell label="B2" />
<listcell label="C2" />
</listitem>
</listbox>
</window>
评论员解释说:
public class LboxViewCtrl extends SelectorComposer<Component> {
@Wire
private Listbox lbox;
@Wire
private Listhead lHead;
@Wire
private Panel menu;
@Wire
private Listbox box;
@Listen("onDrop = #lbox > #lHead > listheader")
public void onDroplHead(DropEvent ev) {
// get the dragged Listheader and the one it is dropped on.
Listheader dragged = (Listheader) ev.getDragged();
Listheader droppedOn = (Listheader) ev.getTarget();
// then get their indexes.
int from = lHead.getChildren().indexOf(dragged);
int to = lHead.getChildren().indexOf(droppedOn);
// swap the positions
lHead.insertBefore(dragged, droppedOn);
// swap related Listcell in all Listitem instances
for (Listitem item : lbox.getItems()) {
item.insertBefore(item.getChildren().get(from), item.getChildren().get(to));
}
}
}
现在我们可以列出这些列。
Now we can dnd the columns.
首先我们添加一个打开的方法我们的菜单,如果我们点击列表框中的按钮。
First we add a method that open up our menu if we click the button in Listbox.
@Listen("onClick = #reorderBtn")
public void onEditorOpen(Event e) {
Window win = (Window) Executions.createComponents("/lbMenu.zul", this.getSelf(), null);
win.doModal();
}
当然我们需要弹出视图:
Of course we need a view for the pop up:
<window id="menu" visible="false" closable="true" position="center" width="400px" height="150px" border="normal" title="Reorder" apply="test.MenuViewCtrl">
<listbox id="box">
<template name="model">
<listitem label="${each.label}" draggable="move" droppable="move" />
</template>
</listbox>
</window>
以及控制器:
@Wire
private Window menu;
@Wire
private Listbox box;
private Listhead lHead;
@Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
// get the Listboxhead in which we like to change the the col order
lHead = (Listhead) menu.getParent().query("#lbox > #lHead");
// set the model for Listbox box in the pop up
box.setModel(new ListModelList<>(lHead.getChildren()));
}
@Listen("onDrop = listitem")
public void onDropInMenu(DropEvent ev) {
// get the draged and dropped again
Listitem dragged = (Listitem) ev.getDragged();
Listitem droppedOn = (Listitem) ev.getTarget();
// then get their indexes.
int from = box.getItems().indexOf(dragged);
int to = box.getItems().indexOf(droppedOn);
// swap the positions
lHead.insertBefore(lHead.getChildren().get(from), lHead.getChildren().get(to));
// swap related Listcell in all Listitem instances
for (Listitem item : lHead.getListbox().getItems()) {
item.insertBefore(item.getChildren().get(from), item.getChildren().get(to));
}
// swap the items in pop up Lisbox as well
box.insertBefore(dragged, droppedOn);
}
如果您想要上/下按钮而不是dnd,只需要一个看看这个 zk demo。
If you want to have up/down buttons instead of dnd, just take a look at this zk demo.
这很容易,可以在 ZK-Documentation 和 ZK Demosite 。
只需添加
It is very easy and can be found quickly in ZK-Documentation and on ZK Demosite.
Just add
sortAscending="XXX" sortDescending="XXX"
到.zul中的zks Listhead
组件,其中 XXX
通过 java.lang.Comparator
.org / wiki / ZK%20Developer%27s%20Reference / MVVM / Data%20绑定rel =nofollow>数据绑定, el表达或设置在作曲家。
to zks Listhead
component in your .zul, where XXX
is evaluated to
java.lang.Comparator
by data binding, el expression or set inside your composer.
这篇关于ZK在列表框中重新排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!