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  authorities;  
    private List 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 getAuthorities() {  
        return authorities;  
    }  
  
    public void setAuthorities(List authorities) {  
        this.authorities = authorities;  
    }  
  
    public List getRoles() {  
        return roles;  
    }  
  
    public void setRoles(List 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 rowList=rows.getChildren();  
        for(int i=0;i

    
 以上我们实现了,动态生成组件绑定数据,下面我们来实现Zul页面(全选)Checkbox 对动态生成组件的(全选/选不选)
          
Xml代码

 

 

 

   首先我们客户端编程需要引入命名空间 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进行

(全选/全部选).

 

以上的功能实现是在和同事(张学化)的讨论下完成的。