2017-07-19 55 views
0

ZK框架。我有自定义组件v_dualListbox.zul:ZK,自定义组件。不同的功能(加载和保存)为一个值

<hlayout hflex="1"> 
 
    <listbox id="candidateLb" hflex="1" vflex="true" multiple="true" rows="8"> 
 
     <template name="model"> 
 
      <listitem> 
 
       <listcell label="${each.description}"/> 
 
      </listitem> 
 
     </template> 
 
    </listbox> 
 
    <vbox spacing="10px" width="24px"> 
 
     <image style="cursor:pointer" id="chooseAllBtn" src="/img/001_25.png"/> 
 
     <image style="cursor:pointer" id="chooseBtn" src="/img/001_25.png"/> 
 
     <image style="cursor:pointer" id="removeBtn" src="/img/001_27.png"/> 
 
     <image style="cursor:pointer" id="removeAllBtn" src="/img/001_27.png"/> 
 
    </vbox> 
 
    <listbox id="chosenLb" hflex="1" vflex="true" multiple="true" rows="8"> 
 
     <template name="model"> 
 
      <listitem> 
 
       <listcell label="${each.description}"/> 
 
      </listitem> 
 
     </template> 
 
    </listbox> </hlayout>

我用它ZUL页:

<?component name="dual-listbox" extends="div" class="ru.it_constanta.pguAdmin.components.DualListbox"?> 
 
<dual-listbox id="scopeDualLBox" chosenDataList="@bind(vm.orgScopeList)" model="@bind(vm.scopeList)"/>

DualListbox.java:

package ru.it_constanta.pguAdmin.components; 

import ... 
public class DualListbox<T> extends HtmlMacroComponent implements IdSpace { 

private static final long serialVersionUID = 5183321186606483396L; 

@Wire 
private Listbox candidateLb; 
@Wire 
private Listbox chosenLb; 

private ListModelList<T> candidateModel = new ListModelList<>(); 
private ListModelList<T> chosenDataModel = new ListModelList<>(); 

private boolean isLoad = false; 

public DualListbox() { 
    Executions.createComponents("v_dualListbox.zul", this, null); 
    Selectors.wireComponents(this, this, false); 
    Selectors.wireEventListeners(this, this); 
    chosenLb.setModel(chosenDataModel = new ListModelList<T>()); 
    chosenDataModel.setMultiple(true); 
} 

@Listen("onClick = #chooseBtn") 
public void chooseItem() { 
    Events.postEvent(new ChooseEvent(this, chooseOne())); 
} 

@Listen("onClick = #removeBtn") 
public void unchooseItem() { 
    Events.postEvent(new ChooseEvent(this, unchooseOne())); 
} 

@Listen("onClick = #chooseAllBtn") 
public void chooseAllItem() { 
    Events.postEvent(new ChooseEvent(this, chooseAll())); 
} 

@Listen("onClick = #removeAllBtn") 
public void unchooseAllItem() { 
    Events.postEvent(new ChooseEvent(this, unchooseAll())); 
} 

/** 
* Set new candidate ListModelList. 
* 
* @param candidate is the data of candidate list model 
*/ 
public void setModel(List<T> candidate) { 
    candidateLb.setModel(this.candidateModel = new ListModelList<>(candidate)); 
    this.candidateModel.setMultiple(true); 
    chosenDataModel.clear(); 
} 

@ComponentAnnotation(
     "@ZKBIND(ACCESS=load, LOAD_EVENT=onLoad)") 
public void setChosenDataList(List<T> chosen) { 
    chosenDataModel.addAll(chosen); 
    candidateModel.removeAll(chosen); 
} 

/** 
* @return current chosen data list 
*/ 
@ComponentAnnotation(
     "@ZKBIND(ACCESS=save, SAVE_EVENT=onChoose)") 
public List<T> getChosenDataList() { 
    return new ArrayList<>(chosenDataModel); 
} 

private Set<T> chooseOne() { 
    Set<T> set = candidateModel.getSelection(); 
    chosenDataModel.addAll(set); 
    candidateModel.removeAll(set); 
    return set; 
} 

private Set<T> unchooseOne() { 
    Set<T> set = chosenDataModel.getSelection(); 
    candidateModel.addAll(set); 
    chosenDataModel.removeAll(set); 
    return set; 
} 

private Set<T> chooseAll() { 
    chosenDataModel.addAll(candidateModel); 
    candidateModel.clear(); 
    return chosenDataModel.getSelection(); 
} 

private Set<T> unchooseAll() { 
    candidateModel.addAll(chosenDataModel); 
    chosenDataModel.clear(); 
    return candidateModel.getSelection(); 
} 

// Customized Event 
public class ChooseEvent extends Event { 
    private static final long serialVersionUID = -7334906383953342976L; 

    public ChooseEvent(Component target, Set<T> data) { 
     super("onChoose", target, data); 
    } 
} 
} 

来自数据库的数据。在加载页面上,我想要放置已经有对象的实体(orgScopeList)的列表,我想在selectedLb列表框中看到它们。我为此使用了selectedDataList属性。我也想保存选择的对象在同一个列表(orgScopeList),我。当客户选择更多实体或不选择它时,我想将它保存在orgScopeList中,这就是为什么我使用@bind注释(用于加载和保存)的原因。所以我需要听两个事件onLoad和我的onChoose两个命令(加载和保存)。我用@ComponentAnnotation写了两个方法,但setChosenDataList不起作用,在加载页面上没有任何反应,我不知道为什么。 我希望有人能理解我:)请帮助!

+0

请看[这个例子](https://www.zkoss.org/wiki/ZK_Component_Reference/Annotation/Data_Binding),它显示保存和加载事件可以一起定义。你可以先尝试在getter上将2个ComponentAnnotations加入1:'ACCESS = both,SAVE_EVENT = onChoose,LOAD_EVENT = onLoad'?此外,我认为'onLoad'可能只是客户端,您可以尝试'onCreate'。您也可以尝试删除加载事件定义。在这种情况下,视图模型将在开始时初始化一次,并且每次在视图模型中通知它时都会进行更改。 –

回答

0

感谢Malte Hartwig的答案,无论是他的建议的正在(仅在吸气用@ComponentAnnotations和使用onCreate事件作为LOAD_EVENT),所以这就是我现在在我的DualListbox.java:

public void setChosenDataList(List<T> chosen) { 
    chosenDataModel.clear(); 
    chosenDataModel.addAll(chosen); 
    candidateModel.removeAll(chosen); 
} 

@ComponentAnnotation(
     "@ZKBIND(ACCESS=both, SAVE_EVENT=onChoose, LOAD_EVENT=onCreate)") 
public List<T> getChosenDataList() { 
    return new ArrayList<>(chosenDataModel); 
} 

但是务必记住,LOAD_EVENT也适用于SAVE_EVENT之后,所以这就是为什么要编写chosenDataModel.clear();

相关问题