最近学习了点ZK相关东西,做了个简单的动态表。希望有ZK高手提供最优实现方式。
基本效果
1、table.zul
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul">
<window title="To do list" width="640px" border="normal">
<zscript>
add(){
Listitem li = new Listitem();
Listcell namecell=new Listcell();
namecell.setHeight("20px");
namecell.setDroppable("true");
Listcell pricell=new Listcell();
Listcell opencell=new Listcell();
namecell.addEventListener(org.zkoss.zk.ui.event.Events.ON_CLICK,new InlinePerson(namecell,new Textbox()));
pricell.addEventListener(org.zkoss.zk.ui.event.Events.ON_CLICK,new InlinePerson(pricell,new Textbox()));
Combobox combo=new Combobox();
String[] _dict = {
"abacus", "accuracy", "acuity", "adage", "afar", "after", "apple",
"home", "honest", "huge",
"information", "inner",
"sound", "spread", "student", "super",
"xeme",
"yea", "yellow",
"zebra", "zk",
};
ListModel dictModel= new SimpleListModel(_dict);
combo.setModel(dictModel);
combo.setAutodrop(true);
combo.setButtonVisible(true);
combo.setWidth("90%");
opencell.addEventListener(org.zkoss.zk.ui.event.Events.ON_CLICK,new InlinePerson(opencell,combo));
li.appendChild(new Listcell());
li.appendChild(namecell);
li.appendChild(pricell);
li.appendChild(opencell);
box.appendChild(li);
}
save(){
StringBuffer tmptvalue= new StringBuffer();
<![CDATA[
for (int j = 0; j < box.getItemCount(); j++) {
java.util.List clist=box.getItemAtIndex(j).getChildren();
for (int i = 0; i < clist.size(); i++) {
tmptvalue.append(clist.get(i).label+" ");
}
}
]]>
label1.setValue(tmptvalue.toString());
}
delete(){
box.removeItemAt(box.getSelectedIndex());
}
</zscript>
<listbox id="box" multiple="true" checkmark="true" mold="paging"
pageSize="10">
<listhead>
<listheader label="Item" width="55px" />
<listheader label="Name" sort="auto" />
<listheader label="Priority" width="150px" />
<listheader label="Opened" width="150px" />
</listhead>
</listbox>
<groupbox>
<button label="Add" width="36px" height="24px"
onClick="add()" />
<button label="Delete" width="46px" height="24px"
onClick="delete()" />
<button label="Save" width="46px" height="24px"
onClick="save()" />
</groupbox>
<label id="label1" value="" />
</window>
</zk>
2、InlinePerson.java
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.Combobox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.Textbox;
public class InlinePerson implements EventListener {
Listcell namecell;
Object oware;
String type;
Listitem li = new Listitem();
public InlinePerson(Listcell namecell, Object oware) {
this.oware = oware;
type = oware.getClass().getName();
if ("org.zkoss.zul.Textbox".equals(type)) {
Textbox textbox = (Textbox) oware;
textbox.setWidth("100%");
textbox.setVisible(false);
textbox.addEventListener(Events.ON_BLUR, this);
namecell.appendChild(textbox);
} else if ("org.zkoss.zul.Combobox".equals(type)) {
Combobox combo = (Combobox) oware;
combo.setVisible(false);
combo.addEventListener(Events.ON_BLUR, this);
namecell.appendChild(combo);
}
this.namecell = namecell;
}
public void onEvent(Event event) throws Exception {
String evt = event.getName();
if (Events.ON_CLICK.equals(evt)) {
// label.setVisible(false);
String tmp = namecell.getLabel();
if ("org.zkoss.zul.Textbox".equals(type)) {
Textbox textbox = (Textbox) oware;
textbox.setVisible(true);
textbox.setValue(tmp);
textbox.focus();
} else if ("org.zkoss.zul.Combobox".equals(type)) {
Combobox combo = (Combobox) oware;
combo.setVisible(true);
combo.setValue(tmp);
combo.focus();
}
namecell.setLabel("");
} else if (Events.ON_OK.equals(evt) || Events.ON_BLUR.equals(evt)) {
if ("org.zkoss.zul.Textbox".equals(type)) {
Textbox textbox = (Textbox) oware;
namecell.setLabel(textbox.getValue());
textbox.setVisible(false);
} else if ("org.zkoss.zul.Combobox".equals(type)) {
Combobox combo = (Combobox) oware;
namecell.setLabel(combo.getValue());
combo.setVisible(false);
}
}
}
}
- 大小: 19.8 KB
分享到:
相关推荐
ZK是一个事件驱动(event-driven)的,基于组件(component-based)的,用以丰富网络程序中用户界面的框架。ZK包括一个基于AJAX事件驱动的引擎(engine),一套丰富的XUL和XHTML,以及一种被称为ZUML(ZK User Interface ...
- 也可以使用`Clients.evalJavaScript()`方法动态执行JavaScript代码,例如重命名文本框的值。 5. **页面间参数传递与接收**:可以通过URL参数或者`Executions.getCurrent().sendRedirect()`方法传递参数,接收端...
1. **ZK组件**:了解ZK提供的各种内置组件,如按钮、表格、树形视图等,以及它们的属性、事件和行为。 2. **事件处理**:理解ZK的事件模型,如何绑定事件监听器,以及如何在组件间传递事件。 3. **数据绑定**:...
它内置了大量的预定义组件,包括按钮、表格、树视图、图表等,这些组件都经过优化,可以提供良好的性能和用户体验。开发者可以通过简单的配置或自定义扩展,来满足特定项目的需求。 在开发过程中,ZK提供了一个强大...
ZK可能会用它来实现动态脚本处理,增强应用的灵活性。 8. **silvertail.jar**:Silvertail可能是ZK的一个子项目或组件,可能包含了网络通信、日志记录、异常处理等相关功能,用于支持ZK应用的稳定运行。 9. **zweb...
开发人员可以使用ZK提供的组件(如`<chart>`标签)在ZUL(ZK User Interface Language)文件中创建图形,同时结合后端数据处理和传输,以实现动态的图表展示。ZK还支持事件处理和数据绑定,使得前端和后端的数据交互...
- **组件化**:ZK提供了大量的预定义UI组件,如按钮、表格、树形结构等,这些组件具有丰富的样式和交互功能,可以直接在页面上使用,大大简化了前端开发工作。 - **事件驱动**:ZK采用事件驱动模型,用户与UI组件的...
它包含了大量的可重用UI组件,如按钮、表格、树形视图、图表等,这些组件都经过精心设计,具有丰富的交互性和可定制性。开发者可以轻松地将这些组件组合在一起,构建出功能强大的Web界面。例如,ZK的`<label>`、`...
- **创建电子表格**:通过ZK提供的API,可以在Web页面上动态创建电子表格组件,设定初始数据和样式。 - **读写操作**:使用API读取和修改电子表格的数据,可以实现保存、加载、剪切、复制、粘贴等基本操作。 - **...
1. **ZK组件库**:ZK提供了一套丰富的组件库,包括按钮、表格、树形结构、图表等,这些组件都支持Ajax功能。开发者可以通过简单的配置,使组件在用户交互时自动发送Ajax请求,获取后台数据并更新界面。 2. **事件...
ZK是一个Java开源框架,它简化了客户端和服务器端之间的通信,使得开发者可以专注于创建动态和响应式的用户界面,而无需深入理解JavaScript或AJAX技术。 在ZK 5.0.2版本中,API包含了一系列组件、事件处理、数据...
这些组件包括按钮、表格、树形视图等,它们在服务器端渲染,然后通过优化的通信协议与客户端进行交互,从而减少了网络传输的数据量,提高了应用性能。 手册中的内容通常会涵盖以下几个关键领域: 1. **入门指导**...
4. **组件库**:ZK拥有一个庞大的组件库,包括各种控件,如按钮、表格、树形视图等,这些组件可以直接在XUL中使用,大大简化了UI的开发。 5. **MVC模式**:ZK遵循Model-View-Controller设计模式,将业务逻辑、数据...
ZK的组件库丰富,涵盖了各种常见的UI元素,如按钮、表格、树形结构等,这些组件都是服务器端的,可以减少网络传输,提高应用性能。事件处理机制允许开发者通过简单的代码响应用户操作,而布局管理器则帮助组织和排列...
3. **组件库**:ZK拥有一个丰富的组件库,包括各种UI控件,如按钮、表格、树形视图等,这些组件都内置了Ajax功能,可以实现异步数据交换。 4. **MVVM模式**:ZK支持Model-View-ViewModel(MVVM)设计模式,这使得...
ZK 8.5.1的API文档会详细介绍各种组件(如按钮、表格、树形结构等)及其事件处理机制,使开发者能够有效地响应用户的操作。 在ZK框架中,组件是构建用户界面的基本单元。这些组件包括标准HTML元素的对应物,如Label...
通过分析这些源码,开发者可以学习如何使用ZK创建动态、交互式的Web界面,理解其组件模型、事件模型以及数据绑定机制。 在深入学习ZK源码时,我们可以关注以下几个关键点: 1. **组件体系**:ZK提供了一系列丰富的...
ZK的核心在于它的组件模型,它提供了许多预先构建的UI组件,如按钮、文本框、表格等,开发者可以像操作传统桌面应用一样操作这些组件。ZK的事件处理机制使得服务器端和客户端之间的交互变得简单直接,无需编写复杂的...
它的组件模型使得开发者可以像操作桌面应用一样操作Web界面,提供了丰富的预定义组件,如按钮、表格、树形视图等,同时支持自定义组件。ZK的MVVM(Model-View-ViewModel)架构模式,使开发者能够更高效地处理数据...