jquery实现显示已选用户

2019-11-20 14:20:29

字体：大中小

来源：转载

供稿：网友

选择用户是一个比较常用的功能，主要包含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 弹出框界面代码

<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="关闭" /><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>

后台代码
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<String> 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<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();     //循环每个的部门     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/">");           //循环每个的部门用户           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参考（仅供参考，无需实现）

<div class="fxtitle">院领导</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">王开宇 </li>   </ul>

上一篇：jquery实现保存已选用户

下一篇：jquery操作checkbox示例分享