`
heini26
  • 浏览: 4298 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

ZK 动态表格

阅读更多

最近学习了点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电子表格开发手册

    ZK是一个事件驱动(event-driven)的,基于组件(component-based)的,用以丰富网络程序中用户界面的框架。ZK包括一个基于AJAX事件驱动的引擎(engine),一套丰富的XUL和XHTML,以及一种被称为ZUML(ZK User Interface ...

    zk入门.web框架

    - 也可以使用`Clients.evalJavaScript()`方法动态执行JavaScript代码,例如重命名文本框的值。 5. **页面间参数传递与接收**:可以通过URL参数或者`Executions.getCurrent().sendRedirect()`方法传递参数,接收端...

    ZK安装 ZK入门 开发 讲解 共3个pdf

    1. **ZK组件**:了解ZK提供的各种内置组件,如按钮、表格、树形视图等,以及它们的属性、事件和行为。 2. **事件处理**:理解ZK的事件模型,如何绑定事件监听器,以及如何在组件间传递事件。 3. **数据绑定**:...

    zk框架学习中文手册

    它内置了大量的预定义组件,包括按钮、表格、树视图、图表等,这些组件都经过优化,可以提供良好的性能和用户体验。开发者可以通过简单的配置或自定义扩展,来满足特定项目的需求。 在开发过程中,ZK提供了一个强大...

    zk 开发依赖包

    ZK可能会用它来实现动态脚本处理,增强应用的灵活性。 8. **silvertail.jar**:Silvertail可能是ZK的一个子项目或组件,可能包含了网络通信、日志记录、异常处理等相关功能,用于支持ZK应用的稳定运行。 9. **zweb...

    zk-bin-7.0.2.zip

    开发人员可以使用ZK提供的组件(如`&lt;chart&gt;`标签)在ZUL(ZK User Interface Language)文件中创建图形,同时结合后端数据处理和传输,以实现动态的图表展示。ZK还支持事件处理和数据绑定,使得前端和后端的数据交互...

    ajax框架 zk开发手册

    - **组件化**:ZK提供了大量的预定义UI组件,如按钮、表格、树形结构等,这些组件具有丰富的样式和交互功能,可以直接在页面上使用,大大简化了前端开发工作。 - **事件驱动**:ZK采用事件驱动模型,用户与UI组件的...

    zk.zip_zk

    它包含了大量的可重用UI组件,如按钮、表格、树形视图、图表等,这些组件都经过精心设计,具有丰富的交互性和可定制性。开发者可以轻松地将这些组件组合在一起,构建出功能强大的Web界面。例如,ZK的`&lt;label&gt;`、`...

    zk spreadsheet3.9.1 在线电子表格

    - **创建电子表格**:通过ZK提供的API,可以在Web页面上动态创建电子表格组件,设定初始数据和样式。 - **读写操作**:使用API读取和修改电子表格的数据,可以实现保存、加载、剪切、复制、粘贴等基本操作。 - **...

    ZK框架:Ajax开发实战

    1. **ZK组件库**:ZK提供了一套丰富的组件库,包括按钮、表格、树形结构、图表等,这些组件都支持Ajax功能。开发者可以通过简单的配置,使组件在用户交互时自动发送Ajax请求,获取后台数据并更新界面。 2. **事件...

    ZK 5.0.2 API

    ZK是一个Java开源框架,它简化了客户端和服务器端之间的通信,使得开发者可以专注于创建动态和响应式的用户界面,而无需深入理解JavaScript或AJAX技术。 在ZK 5.0.2版本中,API包含了一系列组件、事件处理、数据...

    ZK中文开发手册 html

    这些组件包括按钮、表格、树形视图等,它们在服务器端渲染,然后通过优化的通信协议与客户端进行交互,从而减少了网络传输的数据量,提高了应用性能。 手册中的内容通常会涵盖以下几个关键领域: 1. **入门指导**...

    zk框架demo

    4. **组件库**:ZK拥有一个庞大的组件库,包括各种控件,如按钮、表格、树形视图等,这些组件可以直接在XUL中使用,大大简化了UI的开发。 5. **MVC模式**:ZK遵循Model-View-Controller设计模式,将业务逻辑、数据...

    ZK开发文档中文HTML版

    ZK的组件库丰富,涵盖了各种常见的UI元素,如按钮、表格、树形结构等,这些组件都是服务器端的,可以减少网络传输,提高应用性能。事件处理机制允许开发者通过简单的代码响应用户操作,而布局管理器则帮助组织和排列...

    zk语言开发基于Ajax的东西

    3. **组件库**:ZK拥有一个丰富的组件库,包括各种UI控件,如按钮、表格、树形视图等,这些组件都内置了Ajax功能,可以实现异步数据交换。 4. **MVVM模式**:ZK支持Model-View-ViewModel(MVVM)设计模式,这使得...

    ZK 8.5.1API

    ZK 8.5.1的API文档会详细介绍各种组件(如按钮、表格、树形结构等)及其事件处理机制,使开发者能够有效地响应用户的操作。 在ZK框架中,组件是构建用户界面的基本单元。这些组件包括标准HTML元素的对应物,如Label...

    zk-src-6.0.1.zip_zk_zk java_zk-src-6.5.1.1

    通过分析这些源码,开发者可以学习如何使用ZK创建动态、交互式的Web界面,理解其组件模型、事件模型以及数据绑定机制。 在深入学习ZK源码时,我们可以关注以下几个关键点: 1. **组件体系**:ZK提供了一系列丰富的...

    zk十分钟入门demo

    ZK的核心在于它的组件模型,它提供了许多预先构建的UI组件,如按钮、文本框、表格等,开发者可以像操作传统桌面应用一样操作这些组件。ZK的事件处理机制使得服务器端和客户端之间的交互变得简单直接,无需编写复杂的...

    ZK开发手册中文3.5.1版

    它的组件模型使得开发者可以像操作桌面应用一样操作Web界面,提供了丰富的预定义组件,如按钮、表格、树形视图等,同时支持自定义组件。ZK的MVVM(Model-View-ViewModel)架构模式,使开发者能够更高效地处理数据...

Global site tag (gtag.js) - Google Analytics