Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi:
I have a case to show four database records information in a row with paging,and i found the grid can only show one database record in a row.so i used the following code:
ZUL:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
<window id="gwin" title="new page title" border="normal" use="test.zk.GridWindow">
<vbox forEach="${gwin.dataModel.rows}">
<hbox id="${each}">
<hbox forEach="${gwin.dataModel.data[forEachStatus.index]}">
<label value="${each.userName}"></label>
</hbox>
</hbox>
</vbox>
<paging id="mypg" totalSize="100" pageSize="20"/>
</window>
</zk>
JAVA:
package test.zk;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.ext.AfterCompose;
import org.zkoss.zul.Paging;
import test.service.*;
import org.zkoss.zul.Window;
import org.zkoss.zul.event.*;
import org.zkoss.zkplus.databind.AnnotateDataBinder;
import org.zkoss.zk.ui.Components;
public class GridWindow extends Window implements AfterCompose
{
//4 records in a row.
PagingModel dataModel = new PagingModel(UserService.getAllUser(0),4);
protected AnnotateDataBinder binder;
public PagingModel getDataModel() {
return dataModel;
}
public void setDataModel(PagingModel dataModel) {
this.dataModel = dataModel;
}
public void onCreate() {
binder = (AnnotateDataBinder) this.getAttribute("binder", true);
System.out.println("the binder is initial");
}
@Override
public void afterCompose() {
// TODO Auto-generated method stub
Components.wireVariables(this, this);
Components.addForwards(this, this);
Paging pg = (Paging) this.getFellow("mypg");
pg.addEventListener("onPaging", new EventListener(){
public void onEvent(Event event) throws Exception{
PagingEvent pagingEvt =(PagingEvent)event;
System.out.println("active page is " + pagingEvt.getActivePage());
dataModel = new PagingModel(UserService.getAllUser(pagingEvt.getActivePage()),4);
binder.loadAll();
}
});
}
}
The result is as following(there is a picture alias:
User0 User1 User2 User3
.....
.....
User16 User17 User18 User19
a user is a record in user table in database.
There are five pages in total,when i go to other page,the data wasn't refresh.
Are there good way(like Grid etc) to implement my case(show many database record in a row with paging) in ZK?
What's wrong with my case?
It doesn't work because you're mixing the use of of 1-time techniques with dynamic. When you use forEach and EL (${...expr...}), you're telling ZK to evaluate those expressions during the Component Creation phase of the life cycle. This is done exactly ONE time. So, there's no updating the UI elements that were created by that. To do the dynamic updating that you want, you will need to use databinding notation via the @ symbol. There are a lot of small talks linked covering databinding as well as a section in the Developer's Reference. Databinding is not as powerful as EL, so I'm not sure you'll be able to do exactly what you want.
Thanks,actually,i also tried @,but got some errors.
If you have a list of objects,and want to show four objects in each row,and you may have many pages in total(just like shopping website,show many items in each row with paging function).are there good way to do it?
I tried to bind data model to Grid or List,but each row only can show one objects. anyone can give me some clue?
Again thanks.
I don't think you're going to be able to use any of the builtin layouts + databinding to do this. I think you'll need to hook the onCreate event of a vlayout and then loop through your data making hlayout's and adding your 4 children to it. In the onPaging event of your pager, you'll need to remove the children of the vlayout and add the next page of hlayout's + children.
Ok,thank you so much for the suggestion.
Do you think is it possible to bind data model of grid,then use the row render to show many objects in one row?
Thanks and regards.
If you were guaranteed the order of iteration, you could probably create the elements of a row by keeping your own index, using a modulus 4 to generate the items for that row, and skipping creation when modulus 4 != 0. Use the internal collection to pull your objects from. You'll want to double check that the nth item handed to the RowRenderer is === the nth item in your collection.
Asked: 2011-05-24 04:55:04 +0800
Seen: 458 times
Last updated: May 24 '11
