当前位置:首页 > 编程教程 > jQuery技术文章 > jquery实现显示已选用户

jquery实现显示已选用户实例方法

  • 发布时间:
  • 作者:码农之家
  • 点击:207

这篇文章主要知识点是关于jquery、显示已选用户、jquery实现保存已选用户 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Bootstrap与jQuery UI框架设计
  • 类型:jQuery大小:180 MB格式:PDF作者:肖睿//吴振宇
立即下载

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> 

 

jquery实现保存已选用户

1介绍

功能要求:

1 选择用户界面以弹出框方式显示

2 页面选项动态加载(部门及用户)

3 保存勾选的用户

实现分析:

保存已选用户逻辑:

删除原来已选择的用户记录列表(相当于清空操作)
添加新选择用户记录列表
页面

 1 保存共享文件

// 保存共享文件
  function shareFile(){
    // 参数
    var signid = chooseObj.id;
    var objtype = chooseObj.type;
    var userlist = "";
    $("input[name=shareUserId]").each(function(){
       // 此时的this 就是那个 html中的 那个checkbox对象。所以通过
       // this.checked 直接访问属性都是可以的 
       if($(this).attr('checked')){
         userlist = userlist+$(this).val()+","
       }
    });
    if(userlist.length>0){
      userlist = userlist.substring(0, userlist.length-1)
    }
    $.ajax({
      url : '../share/shareFile.do',
      //url:'${ctx}/index.jsp',
      cache : false,
      type : 'post',
      dataType : 'html',
      async : false,
      contentType : "application/x-www-form-urlencoded;charset=utf-8",
      data : {
        'signid' : signid,
        'objtype' : objtype,
        'userlist':userlist
      },
      success : function(ret) {
        // 异常处理
        if(ret==3){
          handleWarm("目标文件夹是自己"); 
          return;
        }else if(ret==2){
          handleWarm("不能移动至子目录"); 
          return;
        } 
        // closeflowcontent('fxcontentflow');
        refreshThisContent();
      }
    })
  }

页面选项内容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>

后台代码
controller层

public void shareFile(HttpServletRequest request,HttpServletResponse response) { 
    
    String signid = request.getParameter("signid") == null? "": request.getParameter("signid"); 
    String objtype = request.getParameter("objtype") == null? "": request.getParameter("objtype"); 
    String userlist = request.getParameter("userlist") == null?"": request.getParameter("userlist"); 
    User user = (User)request.getSession().getAttribute("user"); 
      
    int result = fileShareManager.shareFile(signid, objtype, userlist, user.getUserid().getValue()); 
    try{ 
      request.setCharacterEncoding("UTF-8"); 
      PrintWriter pw = response.getWriter();  
      pw.write("" + result); 
      pw.flush(); 
      pw.close(); 
    }catch (Exception e) { 
      // TODO: handle exception 
      e.printStackTrace(); 
    } 
      
  } 

service层

/** 
   * 指定共享文件、文件夹 
   * 
   * @param signid 文件夹id/文件id      
   * @param objtype 操作对象类型(1:file、2:folder) 
   * @param userlist 分享用户范围 
   * @return 0表示操作失败/1表示操作成功 
   * 
   */ 
  public int shareFile(String signid, String objtype, String userlist, String sharer) { 
    // 删除共享记录 
    fileShareDao.deleteFileshare(signid, objtype);    
    // 新建共享记录 
    String users[] = userlist.split(","); 
    
    // 保存每一个共享用户 
    for (int i = 0; i < users.length && !users[0].equals(""); i++) { 
        WpFileshare wpFileshare = new WpFileshare();       
        wpFileshare.setSharer(sharer); 
        wpFileshare.setShareuser(users[i]);  
        wpFileshare.setSharetime(new Date()); 
        fileShareDao.saveFileshare(wpFileshare); 
    } 
  } 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery实例 相关电子书
学习笔记
网友NO.213610

jQuery+PHP+Mysql实现抽奖程序

抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用jQuery+PHP+MySQL实现类似电视中常见的一个简单的抽奖程序。 查看演示 本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码,可以多次抽奖,被抽中的号码将不会被再次抽中。抽奖流程:点击“开始”按钮后,程序获取号码信息,滚动显示号码,当点击“停止”按钮后,号码停止滚动,这时显示的号码即为中奖号码,可以点击“开始”按钮继续抽奖。 HTML div id="roll"/divinput type="hidden" id="mid" value="" pinput type="button" class="btn" id="start" value="开始" input type="button" class="btn" id="stop" value="停止"/p div id="result"/div 上述代码中,我们需要一个#roll用来显示滚动号码,#mid是用来记录抽中的号码id,然后就是需要两个按钮分别用来“开始……

网友NO.535664

jQuery+css实现的蓝色水平二级导航菜单效果代码

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果。分享给大家供大家参考。具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /title蓝色水平二级导航菜单/titlestyle*{ font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}body{ margin:0; padding:0; background:white;}img{ border:0;}a:link,a:visited,a:active{ text-decoration:none;}a:hover{ text-decoration:underline;}/*********……

网友NO.382494

jQuery组件easyui基本布局实现代码

本文实例为大家分享了 !DOCTYPE htmlhtmlhead meta charset="UTF-8" titleBasic Layout - jQuery EasyUI Demo/title link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" link rel="stylesheet" type="text/css" href="../themes/icon.css" link rel="stylesheet" type="text/css" href="demo.css" script type="text/javascript" src="../jquery.min.js"/script script type="text/javascript" src="../jquery.easyui.min.js"/script/headbody h2基本布局/h2 p布局包括北,南,东,西,中间,部分/p div /div div class="easyui-layout" div data-options="region:'north'" /div div data-options="region:'south',split:true" /div div data-options="region:'east',split:true" title="东" /div div data-options="region:'west',split:true" title="西" /div div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true" thead tr th data-optio……

网友NO.654918

jquery Deferred 快速解决异步回调的问题

jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred(); callback:func(){ return dfd.resolve( response ); } return dfd.promise();}$.when(ok(1),ok(2)).then(function(resp1,resp2){}) //相关API 分成3类 1类:$.when(pro1,pro1) 将多个 promise 对象以and的关系 合并为1个 2类:promise 激发为 解决 deferred.resolve([ args ] ) deferred.resolveWith( context, [ args ] ) 和 拒绝 .reject .rejectWith context 上下文 替换 this 和通知 .notify .notifyWith 3类: 对激发的响应 解决时deferred.done(args) 拒绝时 deferred.fail() 通知时 deferred.progress() 不管 解决 或 拒绝 deferred.always() deferred.then( doneCallbacks, failCallbacks [, progressCallbacks] ) promise(或者叫deferred 延迟对象如何获取?) var dfd = new $.Deferred(); return dfd.promise(); 返回promise当前状态 deferred.state() pending(尚未完成) resolved rejected 管道 deferred.pipe( [ doneFilter ], [ failFilter ] ) var defer = $.Deferre……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com