前言，zk是个有趣又简单的开源 java web application framework ， （走LGPL/商业授权） 它提供丰富的元件供使用者使用，可以用比以往简单很多的方式撰写网页应用程式。:) ----主题开始---- 请洽javaworld （被打） http://www.javaworld.com.tw/jute/post/view?bid=49&id=288983&sty=1&tpg=1&age=0 没有啦 我开玩笑的...XD 只是因为写了几个范例所以丢过来分享一下。（闲聊zk？还在孵...！） 今天我们要做的效果是有点像是填地址时， 都会有下拉式选单选县市、乡镇市一样，你必须针对所选择的县市去连动乡镇市， 这就是所谓的连动式选单(cascade select) 。 在过去这种方案要嘛就是弄一个很大的js array 整个塞进去， （我记得全台乡镇市好像弄起来还不算多，几百个，累了点而已。） 要嘛就是用所谓的 ajax 技巧即时从server side 拿东西回来填。 这里我们要介绍的会比较接近後者这种作法！ 在这个case我们单纯的用选择不同部门底下的小员工来进行说明。 （ex.部门A 有使用者1,2 部门B 有使用者 3,4） 1.首先setup一个zk 需要的jar档跟写好需要的 servlet-mapping 。 （......我会针对这个再写一篇文章的（忏悔 orz）） 2.我们要先准备好要显示的资料层，不然就没东西显示了。（XD） 所以这里会有两个 POJO 一个 Dao ，就只做资料库的查询的物件的对应。 因为讨论的需要所以我是用 JDBC 写 ，但比起JDBC个人更推荐hibernate或ibatis， 可简化一些繁琐的物件映射工作。 POJO简介 Department.java ，公司部门。 有 id 跟名称 Employee.java ，员工资料。 有 id 跟姓名 其中 Department 是一对多 Emploee 的关系。（一个部门有多个员工） 再加上一个负责从资料库查出 Department 跟 Employee 的 Dao。 贴程式码在bbs上是会遭天谴的（谜之音：是你懒得重新排版吧）， 所以我们还是放在gist上看吧。（遮耳） https://gist.github.com/700236 3.接着现在我们有一个 DepartmentDao 含有一个 public List<Department> getDepartments() 方法 会回传所有的Departments资料。 我们接着只要写简单的 zul code 就可以达到我们要得效果了。 (不知道什麽是zul code 的请在版上 /闲聊zk （挺）， zul 相对於 zk ，勉强可以解释为 jsp 相对於 tomcat 的角色。） 我们这里用了一个比较高阶的技巧 (annotation databinding )， 这东西还蛮强大的，有机会再好好说明，先看看它现在怎麽work。 -------------------------------- <?page title="testCascadeCombobox.zul" contentType="text/html;charset=UTF-8"?> <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> <zk> <zscript> <!-- 相对於 DWR 的 DWR.XML，zk 这里还是走java的玩法。 new 出一个 DAO 来进行查询跟取得资料。 --> import test.combobox.*; DepartmentDao depDao = new DepartmentDao(); List deps = depDao.getDepartments(); </zscript> <!-- 这里是有趣的地方。我们用@{selected} 来代表被选中的物件， 当这个物件被修改之後，所有有引用到这个物件实体（instance）的地方， 都会跟着更新。 所谓的model代表的是一组的资料，在这里就是 List<Dapartment>。 --> <combobox id="combo1" model="@{deps}" selectedItem="@{selected}"> <!-- 这里的 self 有回圈的作用，它会iterate deps 这个list中全部的元素--> <!-- dep代表每个个别的元素，它会用每个元素作成combobox的选项--> <comboitem self="@{each=dep}" label="@{dep.name}" value="@{dep.id}"/> </combobox> <!-- 这里是被连动的combobox ，在第一个combobox被选择产生 selected 之後， 他底下的员工(selected.getEmployees())，将会作为第二个combobox 显示资料。 所以会达成我们想要的连动效果。 --> <combobox model="@{selected.employees}" selectedItem="@{selectedEmp}" > <comboitem self="@{each=emp}" label="@{emp.name}" value="@{emp.id}"/> </combobox> <!-- 这里是个 bonus ，示范在zk中 data binding 是很容易使用的。 --> Current Dep:<label value="@{selected.name}" /> </zk> 这里有执行结果的影片。：） http://0rz.tw/mTFHL -- 网页上拉近距离的帮手 实现 GMail丰富应用的功臣 数也数不清的友善使用者体验 这就是ｊａｖａｓｃｒｉｐｔ 欢迎同好到 AJAX 板一同讨论。 --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.133.44.37 ※ 编辑: TonyQ 来自: 220.133.44.37 (11/15 18:23)