jquery实现显示已选用户

标签:业务范围    日期:2019-05-23 17:35    录入:美娱国际平台注册    浏览:

  

[jquery,显示已选用户]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  

  
  
  /**  * 显示指定文件、文件夹的共享范围(共享用户)  * @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();  }  
  
  

service 生成的html参考(仅供参考,无需实现)  

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

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读