jqueryインプリメンテーション選択したユーザーの表示

5688 ワード

ユーザーの選択は比較的一般的な機能で、主に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ポップアップ画面コード

后台代码
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 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 userIdList) throws Exception{ 
    IOrgServiceClient client = new IOrgServiceClient(); 
    IOrgServicePortType service = client.getIOrgServiceHttpPort(); 
    List deptlist = Ws_DeptCenter.getAllDepts(); 
    Map map = new HashMap(); 
    StringBuffer sb = new StringBuffer(); 
    //        
    for(WebDeptment dept:deptlist){ 
      log.info(dept.getDepId()); 
      List userList = userManager.getUserListByDeptid(dept.getDepId(),dept.getActdepId(), service); 
      sb.append(""+dept.getDepMiniName()+""); 
        sb.append(""); 
          //          
          for(DmUser user:userList){ 
            String userid = user.getUserId(); 
            String username = user.getUserName(); 
            sb.append(""); 
            //            
            if(userIdList.contains(userid)){ 
              log.info(userid); 
              sb.append("").append(username).append(" ");  
            }else{ 
              sb.append("").append(username).append(" "); 
            } 
            sb.append(""); 
          } 
        sb.append(""); 
    } 
    return sb.toString(); 
  }

サービス生成htmlリファレンス(リファレンスのみ、実装不要)

肖林

王碩佟

汪勝洋

斉峰

唐回顧文

枚の利生

鄭韶

オフィス

陸建平

郭順蘭

方穎

焦暁君

宋維蕾

張新民

李靖

王開宇

jquery移動端TABタッチパネル切替による効果

selectドロップダウンボックスで関数をトリガーしてパラメータを渡す方法