• 选择用户-显示已选用户


    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>




    
    

  • 相关阅读:
    jquery中attr和prop的区别
    director.js:客户端的路由---简明中文教程
    MVC利用Routing实现多域名绑定一个站点、二级域名以及二级域名注册Area
    机器学习——几种分类算法的汇总
    图像预处理(二值化)
    深度学习训练数据打标签过程
    卷积神经网络(CNN)
    机器学习算法中的准确率(Precision)、召回率(Recall)、F值(F-Measure)
    TortoiseGit上传项目到GitHub
    机器学习中的数据清洗与特征工程
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/3841260.html
Copyright © 2020-2023  润新知