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>
(0)

相关推荐

  • jquery ajax 检测用户注册时用户名是否存在

    首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码 代码如下: <input type="text" size="6" name="NAME" id="NAME"/><

  • 使用Jquery打造最佳用户体验的登录页面的实现代码

    以下操作默认客服端以及开启js支持,noscript情况请自行编写代码实现 首先贴上展示图片: 默认状态: 出错状态: 等待状态: 工作流程: 在用户登录提交之前,在客户端验证输入框只做空值和长度判断,提交到服务器之后自动对提交来的字符串进行合法性以及长度的验证并且去除非法字符返回合法的字符串,根据返回的合法字符串进行登录验证,然后返回json数据给前台处理,其中登录成功的标记是 loginSuccess=0,服务器返回数据之后所有工作交给前台处理. 这里重点介绍前端处理的过程. 首先在页

  • 基于jQuery实现的Ajax 验证用户名是否存在的实现代码

    实例: 1.请求页面AJax.aspx HTML代码 复制代码 代码如下: <div> <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> <div id="show

  • 基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

  • asp.net jQuery Ajax用户登录功能的实现

    主页面调用代码片段: 复制代码 代码如下: <asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink> <script language="javascript" type="text/javascript"> $('#<%=this.lnkLogin.ClientI

  • JQuery运用ajax注册用户实例(后台asp.net)

    复制代码 代码如下: //JS代码 function checkname() { var Msg = document.getElementById("d_username"); var chk = CheckN(); if (chk) { $.ajax({ url: 'registerOK.aspx', type: 'POST', data: { lb: "checkname", username: $("#username").val() }

  • jquery实现保存已选用户

    1介绍 功能要求: 1 选择用户界面以弹出框方式显示 2 页面选项动态加载(部门及用户) 3 保存勾选的用户 实现分析: 保存已选用户逻辑: 删除原来已选择的用户记录列表(相当于清空操作) 添加新选择用户记录列表 页面 1 保存共享文件 // 保存共享文件 function shareFile(){ // 参数 var signid = chooseObj.id; var objtype = chooseObj.type; var userlist = ""; $("inpu

  • 增强用户体验友好性之jquery easyui window 窗口关闭时的提示

    我的弹窗是这么写的 复制代码 代码如下: $('#aa').click(function(){ //按钮单击事件 $('#w').window({//窗口初始化 title:'随便点',width:400,height:300,iconCls:'icon_add', //重要的部分 onBeforeClose:function(){ //当面板关闭之前触发的事件 if (confirm('窗口正在关闭,请确认您当前的操作已保存.\n 是否继续关闭窗口?')) { $('#w').window('

  • jQuery+Ajax用户登录功能的实现

    ok,先来贴几张张效果图. 其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登录成功,

  • jQuery制作仿腾讯web qq用户体验桌面

    jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上.jQuery用户体验设计,web qq桌面十分动感酷炫. 查看演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

随机推荐