前言，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)