≪ユーザーの選択｜Select User｜Eas≫-選択したユーザーを表示します

1紹介
ユーザーの選択は比較的一般的な機能で、主に2つの機能ポイント(選択したオプションを保存し、選択したユーザーを表示)を含む.
機能要件:
1ユーザインタフェースを選択してポップアップ表示
2ページオプションの動的ロード(部門およびユーザー)
3選択したユーザーをチェックして表示
実装分析:
まず、ウィンドウはポップアップボックスなので、ページの内容は主に非同期で取得されます.内容は2つの部分(1の選択肢、2の選択肢)に分かれているので、2つの処理方法がある.
方法1:バックグラウンドはデータ(1待オプション、2選中項目)に基づいて完全なhtmlコードを生成し、一回の非同期操作で返す
方法2:選択対象と選択項目を2回の非同期方法で取得し、ページjs事項で効果を選択します.
多くの論理をページに書くのが好きではないので、最初の案が好きで、お勧めです.
ページ

1              

ロジック:1 showShareRangeメソッドを非同期で呼び出し、htmlコードを完全に取得します.

//             
    function showShareFile(){
        disableFileArea();
        if(!chooseObj.isChoosed()){
            handleWarm("          ");
            enableFileArea();
            return;
        }  
        $('#shareRange').html('');
        showflowcontent('fxcontentflow');
        $.ajax({
            url : '../share/showShareRange.do',
            //url:'${ctx}/index.jsp',
            cache : false,
            type : 'post',
            dataType : 'html',
            async : true,
            contentType : "application/x-www-form-urlencoded;charset=utf-8",
            data : {
                'signid' :chooseObj.id,
                'objtype' :chooseObj.type
            },
            success : function(html) {
                $('#shareRange').html(html);
                 
            }
        })
     }

2        

<div class="flowcontent" id="fxcontentflow">
  <div id="fxloadfile" class="content">
    <div class="title"><strong>    </strong><input type="button" class="closebtn gb" onClick="hideflowcontent(this)" title="  " /><input type="button" class="hidebtn" /></div>
    <div class="body">
      <div class="file" id='shareRange'><!--      -->
      </div><!-- file -->
      <div class="btns"><input type="button" class="submitbtn" value="" onClick="shareFile()" /><input type="button" class="cancelbtn gb" onClick="closeflowcontent('fxcontentflow')" /></div>
      <div class="h30"></div>
    </div>
  </div>
</div>

バックグラウンドコード

controller

/**
     *       、        （    ）
     * @param request
           fileid         id
           folderid        id
            objtype          （file、folder）
     * @param response
     * @throws Exception 
     * @
     * return 0       /1       
     * 
     */
    public void showShareRange(HttpServletRequest request,HttpServletResponse response) {
        String signid = request.getParameter("signid") == null ? "" : request.getParameter("signid");
        String objtype = request.getParameter("objtype") == null ? "" : request.getParameter("objtype");
        //         
        List<String> userIdList= fileShareManager.showShareRange(signid, objtype);
        try {
            //         html  
            String str = fileShareManager.trunToShareRangeHtml(userIdList);
            response.setCharacterEncoding("UTF-8");
            PrintWriter pw = response.getWriter();
            pw.write(str);
            pw.flush();
            pw.close();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            logger.info(e);
            e.printStackTrace();
        }
    }
 
service
 
/**
     *         html  
     * @param userIdList          
     * @return
     * @throws Exception
     */
    public String trunToShareRangeHtml(List<String> userIdList) throws Exception{
        IOrgServiceClient client = new IOrgServiceClient();
        IOrgServicePortType service = client.getIOrgServiceHttpPort();
        List<WebDeptment> deptlist = Ws_DeptCenter.getAllDepts();
        Map map = new HashMap();
        StringBuffer sb = new StringBuffer();
        //       
        for(WebDeptment dept:deptlist){
            log.info(dept.getDepId());
            List<DmUser> userList = userManager.getUserListByDeptid(dept.getDepId(),dept.getActdepId(), service);
            sb.append("<div class=\"fxtitle\">"+dept.getDepMiniName()+"</div>");
                sb.append("<ul class=\"fxxz\">");
                    //         
                    for(DmUser user:userList){
                        String userid = user.getUserId();
                        String username = user.getUserName();
                        sb.append("<li>");
                        //           
                        if(userIdList.contains(userid)){
                            log.info(userid);
                            sb.append("<input type='checkbox' checked=true name='shareUserId' value ='").append(userid).append("'/>").append(username).append(" "); 
                        }else{
                            sb.append("<input type='checkbox' name='shareUserId' value ='").append(userid).append("'/>").append(username).append(" ");
                        }
                        sb.append("</li>");
                    }
                sb.append("</ul>");
        }
        return sb.toString();
    }
 service  htmlリファレンス(リファレンスのみ、    )
<div class="fxtitle">   </div>
    <ul class="fxxz">
        <li><input type="checkbox" name="shareUserId" value="xiaolin">   </li>
        <li><input type="checkbox" name="shareUserId"
            value="wangshuotong">    </li>
        <li><input type="checkbox" name="shareUserId"
            value="wangshengyang">    </li>
        <li><input type="checkbox" name="shareUserId" value="qifeng">   </li>
        <li><input type="checkbox" name="shareUserId" value="tangyiwen">    </li>
        <li><input type="checkbox" name="shareUserId"
            value="zhanglisheng">    </li>
        <li><input type="checkbox" name="shareUserId" value="zhengshao">   </li>
    </ul>
    <div class="fxtitle">   </div>
    <ul class="fxxz">
        <li><input type="checkbox" name="shareUserId" value="lujianping">    </li>
        <li><input type="checkbox" checked="true" name="shareUserId"
            value="guoshunlan">    </li>
        <li><input type="checkbox" name="shareUserId" value="fangying">   </li>
        <li><input type="checkbox" name="shareUserId" value="jiaoxiaojun">    </li>
        <li><input type="checkbox" checked="true" name="shareUserId"
            value="songweilei">    </li>
        <li><input type="checkbox" name="shareUserId" value="zhangxinmin">    </li>
        <li><input type="checkbox" checked="true" name="shareUserId"
            value="lijing">   </li>
        <li><input type="checkbox" name="shareUserId" value="wangkaiyu">    </li>
    </ul>