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

<p class="flowcontent" id="fxcontentflow"> 
 <p id="fxloadfile" class="content"> 
  <p class="title"><strong>分享文件</strong><input type="button" class="closebtn gb" onclick="hideflowcontent(this)" title="关闭" /><input type="button" class="hidebtn" /></p> 
  <p class="body"> 
   <p class="file" id='sharerange'><!-- 共享范围 --> 
   </p><!-- file --> 
   <p class="btns"><input type="button" class="submitbtn" value="" onclick="sharefile()" /><input type="button" class="cancelbtn gb" onclick="closeflowcontent('fxcontentflow')" /></p> 
   <p class="h30"></p> 
  </p> 
 </p> 
</p> 

后台代码
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("<p class=\"fxtitle\">"+dept.getdepmininame()+"</p>"); 
        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参考（仅供参考，无需实现）

<p class="fxtitle">院领导</p> 
  <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> 
  <p class="fxtitle">办公室</p> 
  <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>