jquery实现显示已选用户

网络编程 2025/11/8 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

选择用户是一个比较常用的功能，主要包含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 
    "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,显示已选用户

标签：

jquery,显示已选用户

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“jquery实现显示已选用户”

暂无jquery实现显示已选用户的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

jquery实现显示已选用户

jquery,显示已选用户

jquery实现保存已选用户

jquery操作checkbox示例分享

评论“jquery实现显示已选用户”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

jquery实现显示已选用户

jquery,显示已选用户

jquery实现保存已选用户

jquery操作checkbox示例分享

评论“jquery实现显示已选用户”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存