|
|
Line 1: |
Line 1: |
− | {{ZKDevelopersReferencePageHeader}}
| + | #REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]] |
− | | |
− | Similar to the previous section [[ZK_Developer's_Reference/Data_Binding/Associate_UI_Components_with_a_Collection | Associate UI Components with a Collection]], you can also associate a <javadoc type="interface">org.zkoss.zul.GroupsModel</javadoc> with UI components, and the Data Binding Manager will convert the GroupsModel into UI components accordingly.
| |
− | | |
− | # Prepare the data source of GroupsModel
| |
− | # Associate the GroupsModel with <tt>model</tt> attribute of those supported UI components, ex. <tt>Listbox</tt> and <tt>Grid</tt>.
| |
− | | |
− | In the following example, we demonstrate how to associate a GroupsModel with <tt>Listbox</tt>.
| |
− | | |
− | <source lang="xml" >
| |
− | <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
| |
− | | |
− | <window width="500px">
| |
− | <zscript><![CDATA[
| |
− | //prepare the example group model
| |
− | Object[][] data = {
| |
− | {"cell 1-0", "cell 1-1"}, //group 1
| |
− | {"cell 2-0", "cell 2-1", "cell 2-2"}, //group 2
| |
− | {"cell 3-0", "cell 3-1", "cell 3-2", "cell 3-3"} //group 3
| |
− | };
| |
− | Object[] heads = { "group 1", "group 2", "group 3"};
| |
− | GroupsModel groupsmodel = new SimpleGroupsModel(data, heads);
| |
− | String selected = "cell 1-0";
| |
− | ]]>
| |
− | </zscript>
| |
− | <listbox height="300px" model="@{groupsmodel}" selectedItem="@{selected}">
| |
− | </listbox>
| |
− | <label value="@{selected}"/>
| |
− | </window>
| |
− | </source>
| |
− | | |
− | | |
− | =Version History=
| |
− | {{LastUpdated}}
| |
− | {| border='1px' | width="100%"
| |
− | ! Version !! Date !! Content
| |
− | |-
| |
− | |
| |
− | |
| |
− | |
| |
− | |}
| |
− | | |
− | {{ZKDevelopersReferencePageFooter}}
| |