java - リストボックスでの ZK の並べ替え

Question

zk でlistitemの並べ替えを使用したいzulファイル内にタグ (listitem,listcell) を定義している場合、どうすればよいでしょうか。 ListitemRendererを使用したくありません 。ここで何かを見つけましたが、更新していない可能性があります

Answer 1

リストボックスの列の並べ替え

次の例は、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));
        }

    }

}

これで、列を削除できます。

ポップアップあり

最初に、Listbox のボタンをクリックするとメニューを開くメソッドを追加します。

@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 デモをご覧ください。

リストボックスの行の並べ替え

これは非常に簡単で、 ZK-DocumentationおよびZK Demositeですぐに見つけることができます。
追加するだけ

sortAscending="XXX" sortDescending="XXX"

.zul のzksListheadコンポーネントに、データ バインディング、el 式、またはcomposer内で設定することによってXXX評価されます。
java.lang.Comparator

Answer 2

ここで確認できるZUL自体で並べ替えを行いました