選擇用戶(hù)是一個(gè)比較常用的功能，主要包含2個(gè)功能點(diǎn)（保存已選選項(xiàng)、顯示已選用戶(hù)）

功能要求：

1 選擇用戶(hù)界面以彈出框方式顯示

2 頁(yè)面選項(xiàng)動(dòng)態(tài)加載（部門(mén)及用戶(hù)）

3 已選用戶(hù)以勾選方式顯示

實(shí)現(xiàn)分析：

首先因?yàn)榇翱谑莻€(gè)彈出框，所以頁(yè)面的內(nèi)容主要是以異步方式獲取。因?yàn)閮?nèi)容分為兩個(gè)部分（1待選項(xiàng)、2選中項(xiàng)）所以就有兩種處理方法.

方法1：后臺(tái)根據(jù)數(shù)據(jù)（1待選項(xiàng)、2選中項(xiàng)）生成完整的html代碼，通過(guò)一次異步操作返回

方法2：待選項(xiàng)、和選中項(xiàng)通過(guò)2次異步方法獲取，然后在頁(yè)面js事項(xiàng)選中效果。

因?yàn)椴幌矚g把很多邏輯寫(xiě)在頁(yè)面上，所以比較喜歡第一種方案，也比較推薦。

頁(yè)面

1 彈出選擇共享文件的對(duì)話(huà)框

邏輯：1 異步調(diào)用 showShareRange 方法，獲得完整的html代碼。

//彈出選擇共享文件的對(duì)話(huà)框

  function showShareFile(){

    disableFileArea();

    if(!chooseObj.isChoosed()){

      handleWarm("請(qǐng)先選擇文件或者目錄");

      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="關(guān)閉" /><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>

后臺(tái)代碼

controller

/**

   * 顯示指定文件、文件夾的共享范圍（共享用戶(hù)）

   * @param request

      fileid  選中的文件id

      folderid 選中的文件夾id

      objtype  操作對(duì)象類(lèi)型（file、folder）

   * @param response

   * @throws Exception

   * @

   * return 0表示無(wú)權(quán)限操作/1表示有權(quán)限操作

   *

   */

  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");

    // 獲得當(dāng)前共享用戶(hù)

    List<String> userIdList= fileShareManager.showShareRange(signid, objtype);

    try {

      // 把共享范圍轉(zhuǎn)換成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

/**

   * 把共享范圍轉(zhuǎn)換成html格式

   * @param userIdList 已經(jīng)共享的人員列表

   * @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();

    //循環(huán)每個(gè)的部門(mén)

    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\">");

          //循環(huán)每個(gè)的部門(mén)用戶(hù)

          for(DmUser user:userList){

            String userid = user.getUserId();

            String username = user.getUserName();

            sb.append("<li>");

            // 用戶(hù)是否屬是共享用戶(hù)

            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參考（僅供參考，無(wú)需實(shí)現(xiàn)）

<div class="fxtitle">院領(lǐng)導(dǎo)</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">王開(kāi)宇 </li>

  </ul>

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄