jquery實(shí)現(xiàn)顯示已選用戶

字號(hào):


    選擇用戶是一個(gè)比較常用的功能,主要包含2個(gè)功能點(diǎn)(保存已選選項(xiàng)、顯示已選用戶)
    功能要求:
    1 選擇用戶界面以彈出框方式顯示
    2 頁(yè)面選項(xiàng)動(dòng)態(tài)加載(部門及用戶)
    3 已選用戶以勾選方式顯示
    實(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把很多邏輯寫在頁(yè)面上,所以比較喜歡第一種方案,也比較推薦。
    頁(yè)面
    1 彈出選擇共享文件的對(duì)話框
    邏輯:1 異步調(diào)用 showShareRange 方法,獲得完整的html代碼。
    //彈出選擇共享文件的對(duì)話框
      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 id="fxcontentflow">
     <div id="fxloadfile">
      <div><strong>分享文件</strong><input type="button" onClick="hideflowcontent(this)" /><input type="button" /></div>
      <div>
       <div id='shareRange'><!-- 共享范圍 -->
       </div><!-- file -->
       <div><input type="button" value="" onClick="shareFile()" /><input type="button" onClick="closeflowcontent('fxcontentflow')" /></div>
       <div></div>
      </div>
     </div>
    </div>
    后臺(tái)代碼
    controller
    /**
       * 顯示指定文件、文件夾的共享范圍(共享用戶)
       * @param request
          fileid  選中的文件id
          folderid 選中的文件夾id
          objtype  操作對(duì)象類型(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)前共享用戶
        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è)的部門
        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è)的部門用戶
              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參考(僅供參考,無(wú)需實(shí)現(xiàn))
    <div>院領(lǐng)導(dǎo)</div>
      <ul>
        <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>辦公室</div>
      <ul>
        <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>