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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 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
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
JavaScript实现短信倒计时60s
2017/10/09 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
在python image 中实现安装中文字体
2020/05/16 Python
python实现双人五子棋(终端版)
2020/12/30 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
事业单位接收函
2014/01/10 职场文书
故宫英文导游词
2015/01/31 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL