jquery는 선택된 users_jquery의 표시를 구현합니다.

사용자 선택은 일반적으로 사용되는 기능으로, 주로 2가지 기능 포인트(선택한 옵션 저장, 선택한 사용자 표시)를 포함합니다.

기능 요청:

1 팝업 상자로 표시할 사용자 인터페이스를 선택하세요

2 페이지 옵션 동적 로딩(부서 및 사용자)

선택한 3명의 사용자는 체크 표시와 함께 표시됩니다

구현 분석:

우선 창이 팝업 상자이기 때문에 페이지의 내용을 주로 비동기적으로 가져옵니다. 콘텐츠가 2개 부분(1개 선택, 2개 선택)으로 나누어져 있기 때문에 두 가지 처리 방법이 있습니다.

방법 1: 백그라운드는 데이터(선택할 항목 1개, 선택 항목 2개)를 기반으로 완전한 HTML 코드를 생성하고 비동기 작업을 통해 이를 반환합니다.

방법 2: 두 가지 비동기 방식을 통해 대기 항목과 선택 항목을 얻은 후 페이지 js Matter에서 효과를 선택합니다.

저는 페이지에 논리를 많이 쓰는 걸 안 좋아해서 첫 번째 옵션을 선호하고 추천합니다.

페이지

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> 

백엔드 코드
컨트롤러

/** 
   * 显示指定文件、文件夹的共享范围（共享用户） 
   * @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(); 
    } 
  } 

서비스

/** 
   * 把共享范围转换成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(); 
  } 

서비스에서 생성된 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>