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 相关文章推荐
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
详解写好JS条件语句的5条守则
Feb 28 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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中使用灵巧的体系结构
2006/10/09 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
什么是GWT的Module
2013/01/20 面试题
应届生英语教师求职信
2013/11/05 职场文书
写求职信有什么意义
2014/02/17 职场文书
党员志愿者活动方案
2014/08/28 职场文书
后进生评语大全
2015/01/04 职场文书
法制教育主题班会
2015/08/13 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
《穷人》教学反思
2016/02/19 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL