-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
The data that we are showing in a list box is bound to a table. This table has a column "display_order". We would like the users to use listbox to order the list entries (using drag and drop or any other mechanism) in their desired order and store this ordering using the display_order column.
How is this possible to do?
Regards,
Sohail
Hi Sohail,
I have created a simple sample here:
package j30itlj4$v2;public class Person {
private String firstname;
private String lastname;
public Person(String firstname, String lastname) {
super();
this.firstname = firstname;
this.lastname = lastname;
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
}
package j30itlj4$v2;
import java.util.ArrayList;
import java.util.List;import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.DropEvent;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Column;
import org.zkoss.zul.Columns;
import org.zkoss.zul.Grid;
import org.zkoss.zul.Hlayout;
import org.zkoss.zul.Label;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listhead;
import org.zkoss.zul.Listheader;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Row;
import org.zkoss.zul.RowRenderer;
import org.zkoss.zul.Window;public class MyComposer extends GenericForwardComposer {
private ListModelList model;
private Window win;
private Grid grid;
private Listbox listbox;
public MyComposer(){
List list = new ArrayList();
list.add(new Person("Lee", "CW"));
list.add(new Person("Lin", "Dan"));
list.add(new Person("Peter", "Gade"));
list.add(new Person("Taufik", "Hidayat"));
model = new ListModelList(list);
}/* (non-Javadoc)
* @see org.zkoss.zk.ui.util.GenericForwardComposer#doAfterCompose(org.zkoss.zk.ui.Component)
*/
@Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
Hlayout hl = new Hlayout();
final Listbox listbox = new Listbox();
final Grid grid = new Grid();
Columns cls = new Columns();
Column cl = new Column("Column1");
cls.setParent(grid);
cl.setParent(cls);
Listhead lh = new Listhead();
Listheader lher = new Listheader("Column2");
lher.setSort("auto(lastname)");
lh.setParent(listbox);
lher.setParent(lh);
listbox.setWidth("300px");
grid.setWidth("300px");
listbox.setItemRenderer(new ListitemRenderer(){
public void render(final Listitem listitem, Object arg1) throws Exception {
listitem.setDraggable("true");
listitem.setDroppable("true");
listitem.addEventListener("onDrop", new EventListener(){public void onEvent(Event event) throws Exception {
ListModelList lml = (ListModelList) listbox.getModel();
Listitem dragged = (Listitem) ((DropEvent)event).getDragged();
Person p = (Person) lml.get(dragged.getIndex());
lml.remove(dragged.getIndex());
lml.add(listitem.getIndex(), p);
grid.setModel(lml);
}
});
Person p = (Person)arg1;
Listcell listcell = new Listcell();
listcell.setParent(listitem);
new Label(p.getLastname()).setParent(listcell);
}
});
grid.setRowRenderer(new gridRenderer());
listbox.setModel(model);
grid.setModel(model);
hl.setParent(win);
grid.setParent(hl);
listbox.setParent(hl);
}
class gridRenderer implements RowRenderer{public void render(Row row, Object arg1) throws Exception {
Person p = (Person)arg1;
new Label(p.getFirstname()).setParent(row);
}
}
}
<zk>
<window id="win" title="test" apply="j30itlj4$v2.MyComposer" border="normal"></window>
</zk>
As you can see, when I drag to move up and down the selected item in Columm2, it's the model doing the updates and save the model back to another table (grid) to display the latest order.
Since we need to store the position after drop in the database. Should we just put the value of index in the database from above example. Is index a long value?
Hi Sohail,
You can get the index by using Listitem.getIndex().
And the index is a int value.
Asked: 2012-01-20 14:11:52 +0800
Seen: 200 times
Last updated: Feb 13 '12