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 弹出框界面代码

<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>