Question

我想用选择模具实现Listbox的一个非常常见的功能，这是我在ZK上找不到的。

情况：用户从列表框中选择值。当选择该值并且用户再次打开该列表框时，我需要将模型更改为相同的模型，但前面有空的listitem。如果他选择那个空值，则必须再次将模型更改为相同，但在索引0处没有空的listitem。

我尝试过很多写作：

1）ZUL的动态模型。它有点工作，但我想让ZUL尽可能简单和干净。

<listbox id="x" mold="select" model="@load(not empty vm.criteria[self.id].selectedItem ? 
vm.metaDataMap[self.id].model : vm.metaDataMap[self.id].modelWithEmptyValue)"
    selectedItem="@bind(vm.criteria[self.id].selectedItem)">
    <listitem>
        <listcell label="@load(each.value)" value="@load(each)" />
    </listitem>
</listbox>

2）为我的列表框编写SelectorComposer。它没有正常工作，因为标签和值有时会消失，并且它没有将值设置为“@bind（vm.criteria [self.id] .selectedItem）”。和index`es

有些问题

public class ListboxComposer extends SelectorComposer<Listbox> {
private static final long serialVersionUID = 1L;

public ListModelList<CaseStatusEnum> status = new ListModelList<CaseStatusEnum>(CaseStatusEnum.values());
public ListModelList<CaseStatusEnum> statusWithEmpty = new ListModelList<CaseStatusEnum>(CaseStatusEnum.values());

public Listbox comp;

public void doAfterCompose(Listbox comp) throws Exception {
    super.doAfterCompose(comp);
    comp.setModel(new ListModelList<CaseStatusEnum>(status));
    statusWithEmpty.add(0, null);
}

public ListModelList<CaseStatusEnum> getStatus() {
    return status;
}

@Listen("onSelect = listbox")
public void onSelect(SelectEvent<Listitem, CaseStatusEnum> evt) {
    Listbox listbox = this.getSelf();
    Listitem selectedItem = listbox.getSelectedItem();
    int selectedIndex = selectedItem.getIndex();
    if (listbox.getSelectedItem().getValue() != null) {
        listbox.setModel(statusWithEmpty);
        if (selectedIndex >= listbox.getModel().getSize()) {
            listbox.setSelectedIndex(listbox.getModel().getSize()-1);
        } else {
            listbox.setSelectedIndex(selectedIndex+1);
            listbox.getItemAtIndex(selectedIndex+1).setLabel(selectedItem.getLabel());
            listbox.getItemAtIndex(selectedIndex+1).setValue(selectedItem.getValue());
        }
    } else {
        listbox.setModel(status);
        listbox.clearSelection();
    }
}
}

在我的ZUL：

<listbox id="x" mold="select" apply="lt.pathxxx.ListboxComposer"
    model="${composer.status}"
    selectedItem="@bind(vm.criteria[self.id].selectedItem)">
    <listitem>
        <listcell label="@load(each.value)" value="@load(each)" />
    </listitem>
</listbox>

3）我甚至尝试通过扩展列表框来创建自定义组件。但我也没做过。

所以基本上，我想通过扩展listbox来编写我自己的自定义组件，它可以根据是否有选择的项来操纵模型，或者不是（null）？什么是正确的方法呢？

编辑：基本上，我需要的是

<hlayout id="x">
    <listbox mold="select" selectedItem="@bind(vm.criteria[self.parent.id].order)"
         visible="@load(not empty vm.criteria[self.parent.id].order)">
         <listitem label="" value="" />
         <listitem label="Descending" value="desc" />
         <listitem label="Ascending" value="asc" />
    </listbox>
    <listbox mold="select" selectedItem="@bind(vm.criteria[self.parent.id].order)"
        visible="@load(empty vm.criteria[self.parent.id].order)">
        <listitem  label="Descending" value="desc" />
        <listitem  label="Ascending" value="asc" />
    </listbox>
<hlayout>

我需要在 ONE 列表框中完成所有这些操作，并且必须从java设置模型（listitems）。也许我现在说得更清楚了！谢谢你的回复！

Answer 1

zul：

<listbox mold="select" model="@load(vm.listboxModel)" selectedItem="@bind(vm.selectedListBoxItem)" onSelect="@command('check')">
    <listitem>
        <listcell label="@load(each.value)" value="@load(each)" />
    </listitem>
</listbox>

vm：

private ListModelList listData; // of course init and fill it
private Person selectedListBoxItem;

public ListModelList getListData() {
    return listData;
}

public void setSelectedListBoxItem(Person selectedListBoxItem) {
    this.selectedListBoxItem = selectedListBoxItem;
}

public Person getSelectedListBoxItem() {
    return selectedListBoxItem;
}

@Command
@NotifyChange("listData")
public void check() {
    if (selectedListBoxItem != null) {
        if (listData.get(0) != null) {
            System.out.println("added null");
            listData.add(0, null);
        }
    } else {
        if (listData.get(0) == null) {
            System.out.println("removed null");
            listData.remove(0);
        }
    }
}

编辑：更像这样？测试了它（使用System.out.println("removed null");，这样你就可以检查他是否做了他需要做的事情。

希望这是你想要的（我对你的问题的理解）。

Greetz chill。

ZK自定义列表框组件

1 个答案: