1介绍

选择用户是一个比較经常使用的功能，主要包括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>