ZK客户端编程之Checkbox复选框的(全选/全不选)
on June 30, 2010, I have met a question In ZK client programming, 使用 ZK的方便之处就是基于注 解"@{}",但所有的事物都是双刃剑,当我们使用注解实现AfterCompse接口 zk自动帮我们绑定后台的对象,但当我们对同一对象重用时,我们必须还需在后台把它的实例给销毁,然后重新绑定对象.这样的一来一回会减低我们的开发效率.
所以使用ZK注解开发人员应该考虑相应系统的复杂性和重用性后酌情处理。
下面的例子是在开发中动态生成Component组件 并使用客户端技术JQuery 实现功能
1.后台Java类中动态生成Grid 容器组件的子组件 把在这些组件创建时绑定数据然后再返回给zul页面显示数据.
Java代码
package com.linktel.linkFax.web.zk.controller;
import java.awt.Checkbox;
import java.util.Iterator;
import java.util.List;
import org.apache.commons.lang.StringUtils;
import org.zkoss.zk.ui.Components;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.ext.AfterCompose;
import org.zkoss.zkplus.databind.AnnotateDataBinder;
import org.zkoss.zkplus.spring.SpringUtil;
import org.zkoss.zul.Window;
import org.zkoss.zul.api.Combobox;
import org.zkoss.zul.api.Div;
import org.zkoss.zul.api.Grid;
import org.zkoss.zul.api.Label;
import org.zkoss.zul.api.Row;
import org.zkoss.zul.api.Rows;
import com.linktel.linkFax.domain.Authority;
import com.linktel.linkFax.domain.Role;
import com.linktel.linkFax.service.AuthorityService;
import com.linktel.linkFax.service.RoleService;
import com.linktel.linkFax.web.zk.util.ZkUtils;
public class AuthorityController extends Window implements AfterCompose {
private static final long serialVersionUID = 1L;
private Role role = new Role();
private Authority authority=new Authority();
private List<Authority> authorities;
private List<Role> roles;
protected Grid gdAuthorities;
protected AnnotateDataBinder binder;
private Combobox cbxRole;
public Role getRole() {
return role;
}
public void setRole(Role role) {
this.role = role;
}
public Authority getAuthority() {
return authority;
}
public void setAuthority(Authority authority) {
this.authority = authority;
}
public List<Authority> getAuthorities() {
return authorities;
}
public void setAuthorities(List<Authority> authorities) {
this.authorities = authorities;
}
public List<Role> getRoles() {
return roles;
}
public void setRoles(List<Role> roles) {
this.roles = roles;
}
@Override
public void afterCompose() {
Components.wireVariables(this, this);
Components.addForwards(this, this);
init();
}
public void onCreate() {
binder = (AnnotateDataBinder) this.getAttribute("binder", true);
}
/*
* 页面加载实现afterComposer()方法初始化
* 动态创建Grid组件Rows中的Checkbox 组件并绑定数据
*/
@SuppressWarnings("unchecked")
public void init() {
RoleService roleService = (RoleService) SpringUtil
.getBean("roleService");
roles = roleService.getRolesAll();
AuthorityService authService = (AuthorityService) SpringUtil
.getBean("authorityService");
authorities = authService.getAuthoritiesAll();
Rows rows=gdAuthorities.getRowsApi();
List<Row> rowList=rows.getChildren();
for(int i=0;i<authorities.size();i++){
Authority authority= authorities.get(i);
Row row=new org.zkoss.zul.Row();
Div div=new org.zkoss.zul.Div();
org.zkoss.zul.api.Checkbox chk=new org.zkoss.zul.Checkbox();
Label lblId=new org.zkoss.zul.Label();
lblId.setValue(authority.getId().toString());
Label lblDisName=new org.zkoss.zul.Label();
lblDisName.setValue(authority.getDisplayName());
chk.setParent(div);
lblId.setParent(div);
div.setParent(row);
lblDisName.setParent(row);
rowList.add(row);
}
}
以上我们实现了,动态生成组件绑定数据,下面我们来实现Zul页面(全选)Checkbox 对动态生成组件的(全选/选不选)
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<?page id="authorityPage"?>
<?xel-method prefix="c" name="hasPermission"
class="com.linktel.linkFax.web.zk.util.AuthorityTools"
signature="com.linktel.linkFax.web.zk.util.AuthorityTools hasPermission(java.lang.String)"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="./authorityWin"?>
<window id="authorityWin"
use="com.linktel.linkFax.web.zk.controller.AuthorityController" width="100%"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:n="http://www.zkoss.org/2005/zk/native" xmlns="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"
xmlns:w="http://www.zkoss.org/2005/zk/client">
<grid id="gdAuthorities" mold="paging" paginal="@{pagingId}"
fixedLayout="true">
<columns>
<column>
<checkbox w:onCheck="
var allCtrl = this;
jq('@checkbox',this.parent.parent.nextSibling).each(
function(i,chk){
var c =zk.Widget.$(chk);
if(allCtrl.isChecked()){
c.setChecked(true);
}else{
c.setChecked(false);
}
});"></checkbox>
</column>
<column></column>
</columns>
<rows>
</rows>
</grid>
</window>
首先我们客户端编程需要引入命名空间 xmlns:w=http://www.zkoss.org/2005/zk/client
ZK引擎是基于Jquery实现的, 我们使用zk给我们提供的JQuery类库 ZK中w:onCheck="" 在用户选中一个复选按钮时触发一个oncheck客户端事件,jq(@window,this.parent.nextSibling).each(...);@window是checkbox组件类型,this.parent.nextSibling是找到当前组件的父组件的同级组件;each(.....)对嵌套的组件进行遍历,each(....)中定义匿名函数,function(i,chk){...} chk参数就是被迭代的子组件,zk5.0.2中checkbox其实不具有客户端checkbox的任何行(action)为,所以我们必须用zk.Widget.$(chk);转换成Widget客户端的组件这样它才真正具有了checkbox的行为(action).转换成widget的组件后我们就可以在客户端对checkbox进行
(全选/全部选).
以上的功能实现是在和同事(张学化)的讨论下完成的。