jquery实现显示已选用户


Posted in Javascript onJuly 21, 2014

选择用户是一个比较常用的功能,主要包含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>
Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
全面分析JavaScript 继承
May 30 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
js实现网页随机验证码
Oct 19 Javascript
jquery操作checkbox示例分享
Jul 21 #Javascript
jquery常用操作小结
Jul 21 #Javascript
JavaScript中的apply和call函数详解
Jul 20 #Javascript
一行命令搞定node.js 版本升级
Jul 20 #Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 #Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 #Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 #Javascript
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
python 动态加载的实现方法
2017/12/22 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python爬取网易云音乐评论
2018/11/16 Python
Python匿名函数及应用示例
2019/04/09 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
超市5.1促销活动
2014/01/15 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年银行个人工作总结
2014/12/05 职场文书