ZK框架表格绑定点击弹窗事件

ZK框架特点：

1. 做报表这类效率非常的高
2. 框架主要功能比较通俗易懂，上手快

相对的缺点却是很致命的，不仅页面美观度不高而且使用率很低，网上的资料非常的少，导致客户验收之后提新功能的实现上有很大困难。

用了大概半年多的ZK框架今天讲一下ZK中表格的点击事件。

需求前提：客户提了个新需求，要求报表中展示的人数数字显示该人数下所有的人名。

首先，既然是弹窗，肯定需要一个弹出窗口。这里我们在工程中先建一个测试的zul。

<?xml version="1.0" encoding="UTF-8"?>
<window id="win" title="测试" use="Test" width="30%">
    <window id="main_win" >
       <grid width="100%">
            <columns >
                <column>
                    <button label="测试按钮" onClick="win.select()" />
                </column>
            </columns>
        </grid>
    </window>
    <grid id="usegrid">

    </grid>
    <window id="win_test" border="normal" visible="false" width="20%" use="Win" closable="true">
        <caption label="测试弹窗"/>
        <window id="win_test_children" border="normal" >
                <grid id="testgrid">  

                </grid> 
        </window>
    </window>
</window>   

页面主要是一个按钮触发表格的生成。
id=win的window的use要等于调用的java类地址（这里为了方便我直接将Test类放到了src下），这样搜索按钮就可以直接调用Test类里的select方法。
id=win_test的就是我们需要弹出的测试窗口了（注意要将这个窗口隐藏visible=”false”）。弹出窗口引用了一个关闭窗口的类，如下：

@SuppressWarnings("serial")
public class Win extends Window {
    /*弹出窗口关闭*/
    public void detach()   {
        //重写关闭方法,会把父类的关闭方法.
        this.setVisible(false);
    }
}

接下来我们开始写Test类文件。

@SuppressWarnings("serial")
public class Test extends Window {
    public void onCreate() {
        // 窗口
        Window win = (Window) this.getFellow("win_test");
        // 子窗口
        Window winChildren = (Window) win.getFellow("win_test_children");
        // grid
        Grid grid = (Grid) winChildren.getFellow("testgrid");
        //创建列名
        Columns columns = new Columns();
        columns.setSizable(true);
        columns.setParent(grid);
        Column column = new Column();
        column.setLabel("序号");
        column.setAlign("center");
        column.setParent(columns);
        Column column1 = new Column();
        column1.setLabel("内容");
        column1.setAlign("center");
        column1.setParent(columns);
    }

    @SuppressWarnings("unchecked")
    public void select() {
        Grid grid = (Grid) getFellow("usegrid");
        // 窗口
        final Window win = (Window) this.getFellow("win_test");
        // 子窗口
        Window winChildren = (Window) win.getFellow("win_test_children");
        // grid
        Grid testGrid = (Grid) winChildren.getFellow("testgrid");
        //清空grid
        if (grid.getRows() != null) {
            grid.getRows().detach();
        }
        if (testGrid.getRows() != null) {
            testGrid.getRows().detach();
        }
        //创建表格内的行
        Rows rows = new Rows();
        rows.setParent(grid);
        rows.setHeight("20px");

        final Rows testrows = new Rows();
        testrows.setParent(testGrid);
        testrows.setHeight("20px");

        Row row = new Row();
        row.setParent(rows);
        //给行赋值
        new Label("表格内容").setParent(row);
        //创建点击事件
        Label lb1 = new Label("点击");
        lb1.addEventListener(Events.ON_CLICK, new EventListener() {
            public void onEvent(Event arg0) throws Exception {
                List list = new ArrayList();
                list.add("1");
                list.add("2");
                list.add("3");
                for (int i = 0; i < list.size(); i++) {
                    Row row = new Row();
                    row.setParent(testrows);
                    new Label(String.valueOf(i + 1)).setParent(row);
                    new Label(list.get(i).toString()).setParent(row);
                }
                //弹窗方法
                win.doModal();
                //清空弹窗内容
                testrows.getChildren().clear();
            }
        });
        lb1.setParent(row);
    }
}

这里有个onCreate方法，我们之后再说为什么写一个方法执行创建列。

注释写的比较明白了，就是获取zul的window和grid的id，在创建行内容的时候（Label lb1 = new Label(“点击”);）绑定点击事件（lb1.addEventListener(Events.ON_CLICK, new EventListener() {}），注意在绑定事件里面的变量都是final类型，具体原因不明。
绑定好之后就可以使用doModal()方法弹出了，这里建议getChildren().clear()一下，不然多次点击弹窗内的表格会不断累积。

现在我们可以来试一下效果：

页面初始的样式：

点击测试按钮的样式：

点击“点击”表格的样式：

现在说一下为什么要有个onCreate方法，这个方法是ZK框架监听器自动运行的，就是说进页面就会先生成列名，如果不先生成列名，多次点击按钮生成会报错：

错误：只能创建一个列在testgrid，所以表格的列名需要进页面就创建好，或者只执行一次。