FrontPage > SAStrutsの覚書 > サンプルアプリ

Ajax

登録/編集画面の管理者ID入力部分をリストから選択するように変更し、
部門名が変更されたタイミングで、リストの内容をAjax通信で取得し
設定するようにする。
リストの内容はMGR_IDが未設定のユーザ、および選択された部門に属するユーザ
としてみる。

1. EditEmpForm.javaに管理者リスト用のフィールドを追加

   /** 管理者リスト */
   public List<Emp> mgrList;

2. 管理者リスト用の検索を行うメソッドを作成

  • 検索用の外部SQLファイルを作成する。

    EmpService_findByDeptId.sql
    select ID, EMP_NO, EMP_NAME, MGR_ID, HIREDATE, SAL, DEPT_ID, VERSION_NO
    from EMP
    where
     MGR_ID is null
     /*IF deptId != null*/
       or DEPT_ID = /*deptId*/
     /*END*/
  • 作成した外部SQLファイルのパスをSqlFiles.javaへ定数登録する。
       /**
        * {@code com/ziqoo/sassample/service/EmpService_findByDeptId.sql}の定数です。
        */
       public static final String SERVICE_EMP_SERVICE_FIND_BY_DEPT_ID = "com/ziqoo/sassample/service/EmpService_findByDeptId.sql";
  • empService.javaへメソッドを追加する。
       public List<Emp> findByDeptId(Integer deptId) {
           return jdbcManager.selectBySqlFile(Emp.class, SqlFiles.SERVICE_EMP_SERVICE_FIND_BY_DEPT_ID, deptId).getResultList();
       }

3. Actionクラスの各メソッドに管理者リスト設定処理を追加する。

  • EditEmpAction.java
    ・・・略
    public class EditEmpAction {
    ・・・略・・・
       @Execute(validator=false)
       public String index() {
    ・・・略・・・
           // 部門選択リスト作成
           editEmpForm.deptList = deptService.findAllOrderById();
           // 管理者リスト作成
           editEmpForm.mgrList = empService.findByDeptId(editEmpForm.deptId);
    
           return "editEmp.jsp";
       }
    
       @Execute(validator=true, input="echo")
       public String add() {
    ・・・略・・・
           // 部門選択リスト作成
           editEmpForm.deptList = deptService.findAllOrderById();
           Emp emp = Beans.createAndCopy(Emp.class, editEmpForm).execute();
           // 管理者リスト作成
           editEmpForm.mgrList = empService.findByDeptId(editEmpForm.deptId);
    ・・・略・・・
       }
    
       @Execute(validator=true, input="echo")
       public String update() {
           // 部門選択リスト作成
           editEmpForm.deptList = deptService.findAllOrderById();
           Emp emp = Beans.createAndCopy(Emp.class, editEmpForm).execute();
           // 管理者リスト作成
           editEmpForm.mgrList = empService.findByDeptId(editEmpForm.deptId);
    ・・・略・・・
       }
    
       @Execute(validator=false)
       public String echo() {
           //TokenProcessor.getInstance().saveToken(request);
           // 部門選択リスト作成
           editEmpForm.deptList = deptService.findAllOrderById();
           // 管理者リスト作成
           editEmpForm.mgrList = empService.findByDeptId(editEmpForm.deptId);
    
           return "editEmp.jsp";
       }
    }

4. jQueryライブラリ組み込み

  • jQueryのサイトよりjquery-1.7.1.min.jsを取得し、
    プロジェクトのsrc/main/webapp/jsフォルダにコピーする。
  • editEmp.jspへ以下の一行を追加
    <script type="text/javascript" src="${f:url('/js/jquery-1.7.1.min.js')}"></script>
  • editEmp.jspへ管理者IDリストを変更するJavaScriptのfunctionを追加
    function setUpMgrList() {
       var param = new Object();
       param.deptId = $('#deptId').val();
       $('#mgrList').load("${f:url('setUpMgrList')}", param);
    }
  • editEmp.jspの管理者ID部分へ<div id="mgrList">を追加する。
     <th class="data">管理者ID</th>
     <td class="data">
       <div id="mgrList">
         <html:select property="mgrId">
           <option value=""></option>
           <html:options collection="mgrList" property="id" labelProperty="empName"/>
         </html:select>
       </div>
     </td>
  • 部門名にonchange="setUpMgrList()"追加
     <html:select property="deptId" onchange="setUpMgrList()" styleId="deptId">

5. サーバー側の処理

  • EditEmpAction.javaへAjaxで呼び出されるメソッドを追加
       @Execute(validator=false)
       public String setUpMgrList() {
           // 管理者リスト作成
           editEmpForm.mgrList = empService.findByDeptId(editEmpForm.deptId);
           return "mgrList.jsp";
       }
  • 管理者リスト部分のhtmlを返すjspを作成
    src/main/webapp/WEB-INF/view/editEmpへmgrList.jspを作成する。
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <select name="mgrId">
       <option value=""></option>
       <c:forEach var="emp" items="${mgrList}">
           <option value="${emp.id}">${emp.empName}</option>
       </c:forEach>
    </select>

6. 結果

sassample13.jpg

部門を変更

sassample14.jpg

リストの内容が変更される。

sassample15.jpg





添付ファイル: filesassample15.jpg 359件 [詳細] filesassample14.jpg 422件 [詳細] filesassample13.jpg 399件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-03-10 (土) 03:19:09 (2467d)