足球游戏_中国足彩网¥体育资讯$

jquery实现显示已选用户
来源:易贤网 阅读:843 次 日期:2014-07-24 21:26:08
温馨提示:易贤网小编为您整理了“jquery实现显示已选用户”,方便广大网友查阅!

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

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网络编程
易贤网手机网站地址:jquery实现显示已选用户
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标