jquery实现显示已选用户

选择用户是一个比较常用的功能，主要包含2个功能点（保存已选选项、显示已选用户）

功能要求：

1 选择用户界面以弹出框方式显示

2 页面选项动态加载（部门及用户）

3 已选用户以勾选方式显示

实现分析：

首先因为窗口是个弹出框，所以页面的内容主要是以异步方式获取。因为内容分为两个部分（1待选项、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

 
  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

 
  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(); 
  } 

service 生成的html参考（仅供参考，无需实现）

院领导 
  
 
    
肖林 
 
    
王硕佟 
 
    
汪胜洋 
 
    
齐峰 
 
    
唐忆文 
 
    
张利生 
 
    
郑韶 
 
  
 
  办公室 
  
 
    
陆建平 
 
    
郭顺兰 
 
    
方颖 
 
    
焦晓君 
 
    
宋维蕾 
 
    
张新民 
 
    
李靖 
 
    
王开宇