ZK在重新排序列表框

Question

我将要在ZK使用列表项的重新排序，我们如何能做到这一点，当我们有定义ZUL文件内标签（列表项，listcell元素里面）。我不想用的ListItemRenderer 。 Here我发现的东西，但可能是他们没有更新的东西

Answer 1

列表框列重新排序

的folloing例如可以在zk fiddle找到了。

通过拖放

首先，我们延伸到弹出方式后来DND例子。
简单的观点：

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

    } 

} 

现在我们可以DND列。

随着弹出

首先我们补充一点，打开我们的菜单的方法，如果我们点击列表框的按钮。

@Listen("onClick = #reorderBtn") 
public void onEditorOpen(Event e) { 
    Window win = (Window) Executions.createComponents("/lbMenu.zul", this.getSelf(), null); 
    win.doModal(); 
} 

当然，我们需要弹出一个观点：

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

列表框重新排序行

这是非常容易的，可以在ZK-Documentation和ZK Demosite快速找到。
在.zul，其中XXX由data binding，el expression评估，以
java.lang.Comparator或者设置composer内只需添加

sortAscending="XXX" sortDescending="XXX" 

到ZKS Listhead组件。

Answer 2

我已经做了在ZUL本身重新排序，您可以检查Here