The jquery implementation displays the selected user

Selecting users is a commonly used function, which mainly contains two function points (save selected options and display selected users).

Functional requirements:

Select the user interface to be displayed as a pop-up box

2 page options dynamic loading (departments and users)

3. Selected users are displayed by checking

Implementation analysis:

First, because the window is a pop-up box, the content of the page is mostly retrieved asynchronously. Because the content is divided into two parts (1 to be selected and 2 to be selected), there are two ways to do this.

Method 1: the background generates complete HTML code based on the data (1 to be selected, 2 selected) and returns it through an asynchronous operation

Method 2: the pending options, and selected items are obtained through 2 asynchronous methods, and then selected in the page js item effect.

Since I don't like to write a lot of logic on the page, I prefer the first solution and recommend it.

page

A dialog box pops up to select a Shared file
Logic: 1 calls the showShareRange method asynchronously to get the complete HTML code.

//A dialog box pops up to select a Shared file
  function showShareFile(){
    disableFileArea();
    if(!chooseObj.isChoosed()){
      handleWarm(" Please select a file or directory first ");
      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 pop-up box interface code

<div class="flowcontent" id="fxcontentflow"> 
 <div id="fxloadfile" class="content"> 
  <div class="title"><strong> Share files </strong><input type="button" class="closebtn gb" onClick="hideflowcontent(this)" title=" Shut down " /><input type="button" class="hidebtn" /></div> 
  <div class="body"> 
   <div class="file" id='shareRange'><!--  Shared scope  --> 
   </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> 

The background code
The controller

/** 
   *  Displays the Shared scope of specified files, folders (Shared users)  
   * @param request 
      fileid   Selected file id 
      folderid  Selected folder id 
      objtype   Operation object type ( file , folder )  
   * @param response 
   * @throws Exception 
   * @ 
   * return 0 Represents an unauthorized operation /1 Indicates a privileged operation  
   * 
   */ 
  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"); 
    //Gets the current Shared user
    List<String> userIdList= fileShareManager.showShareRange(signid, objtype); 
    try { 
      //Convert the Shared scope to HTML format
      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(); 
    } 
  } 

The service

 
  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(); 
    //Loop through each department
    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">"); 
          //Loop each department user
          for(DmUser user:userList){ 
            String userid = user.getUserId(); 
            String username = user.getUserName(); 
            sb.append("<li>"); 
            //Whether the user is a Shared user
            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 reference generated by service (for reference only, no implementation required)

<div class="fxtitle"> School leadership </div> 
  <ul class="fxxz"> 
    <li><input type="checkbox" name="shareUserId" value="xiaolin"> chorin  </li> 
    <li><input type="checkbox" name="shareUserId" 
      value="wangshuotong"> Wang shuo tong  </li> 
    <li><input type="checkbox" name="shareUserId" 
      value="wangshengyang"> Wang Shengyang  </li> 
    <li><input type="checkbox" name="shareUserId" value="qifeng"> qifeng  </li> 
    <li><input type="checkbox" name="shareUserId" value="tangyiwen"> Tang Yiwen  </li> 
    <li><input type="checkbox" name="shareUserId" 
      value="zhanglisheng"> li  </li> 
    <li><input type="checkbox" name="shareUserId" value="zhengshao"> Zheng Shao  </li> 
  </ul> 
  <div class="fxtitle"> The office </div> 
  <ul class="fxxz"> 
    <li><input type="checkbox" name="shareUserId" value="lujianping"> Miller ab.hoogstraten b  </li> 
    <li><input type="checkbox" checked="true" name="shareUserId" 
      value="guoshunlan"> Guo Shunlan  </li> 
    <li><input type="checkbox" name="shareUserId" value="fangying"> coolio  </li> 
    <li><input type="checkbox" name="shareUserId" value="jiaoxiaojun"> JiaoXiaoJun  </li> 
    <li><input type="checkbox" checked="true" name="shareUserId" 
      value="songweilei"> Song Weilei  </li> 
    <li><input type="checkbox" name="shareUserId" value="zhangxinmin"> Zhang xinming  </li> 
    <li><input type="checkbox" checked="true" name="shareUserId" 
      value="lijing"> excavate  </li> 
    <li><input type="checkbox" name="shareUserId" value="wangkaiyu"> Kai-yu wang  </li> 
  </ul>