`
YongJie
  • 浏览: 73161 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

使用JS提交可以翻页的列表

阅读更多

Action:

public class JavaScriptArrayAction extends DispatchAction{

    public ActionForward search(ActionMapping mapping, ActionForm form, HttpServletRequest request,
     HttpServletResponse response) {
 HttpSession session = request.getSession(true);
 JavaScriptArrayForm javaScriptArrayForm = (JavaScriptArrayForm)form;
 List<String> data = (List<String>)session.getAttribute("data");

 int current = javaScriptArrayForm.getCurrent() - 1;
 if(current > -1 && current < 10){
     List<String> l = data.subList(current++ * 10,current * 10);
     javaScriptArrayForm.setData(l);
     String allJSON = javaScriptArrayForm.getAllJSON().trim();

     List<String> names = new ArrayList<String>(l.size());

     if(null != allJSON && allJSON.length() > 0){
  List<String> allList = Arrays.asList(allJSON.substring(1,allJSON.length() - 1).split(","));
  for(int i = 0; i < l.size(); i++){
      names.add(i,allList.contains(l.get(i)) ? l.get(i) : "");
  }
  javaScriptArrayForm.setCurJSON(listToJSON(names));
     }else{
  javaScriptArrayForm.setAllJSON("[]");
  javaScriptArrayForm.setCurJSON("[]");
     }

     String[] ss = new String[names.size()];
     names.toArray(ss);
     javaScriptArrayForm.setName(ss);
 }
 
 return mapping.getInputForward();
    }

    @Override
    protected ActionForward unspecified(ActionMapping mapping, ActionForm form, HttpServletRequest request,
     HttpServletResponse response) throws Exception {
 HttpSession session = request.getSession(true);
 JavaScriptArrayForm javaScriptArrayForm = (JavaScriptArrayForm)form;

 Random rand = new Random();
 Set<String> set = new HashSet<String>();

 do{
     set.add(Integer.toString(rand.nextInt()));
 }while(set.size() <= 100);

 List<String> data = new ArrayList<String>();
 data.addAll(set);
 session.setAttribute("data",data);

 javaScriptArrayForm.setCurrent(1);

 return search(mapping,javaScriptArrayForm,request,response);
    }

    public String listToJSON(List<String> array) {
 Iterator<String> i = array.iterator();
 if(!i.hasNext())
     return "[]";

 StringBuilder sb = new StringBuilder();
 sb.append('[');
 for(;;){
     String e = i.next();
     if(e.length() == 0){
  if(!i.hasNext()){
      if(sb.indexOf(", ",sb.length() - 2) == -1){
   return sb.append(']').toString();
      }else{
   return sb.replace(sb.length() - 2,sb.length(),"]").toString();
      }
  }else
      continue;
     }

     sb.append(e);
     if(!i.hasNext()){
  if(sb.indexOf(", ",sb.length() - 2) == -1){
      return sb.append(']').toString();
  }else{
      return sb.replace(sb.length() - 2,sb.length(),"]").toString();
  }
     }
     sb.append(", ");
 }
    }
}

 

 

form: 

public class JavaScriptArrayForm extends ActionForm{    
    private String allJSON = "";//JS数组[所有页选中的]
    private String curJSON = "";//JS数组[当前页选中的]

    private String[] name;//当前页选中的值
    private List<String> data = new ArrayList<String>();//当前页所有的值
    
    private int current = 0;

    。。。。。。


 } 

  

JSP:

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-nested" prefix="nested"%>
<html> 
 <head>
  <title>JSP for JavaScriptArrayForm form</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">
   var v_all = trim(<bean:write name="javaScriptArrayForm" property="allJSON"/>);
   var v_cur = trim(<bean:write name="javaScriptArrayForm" property="curJSON"/>);
   
   function doSearch(page){
    var val = document.forms[0].elements['current'].value + page;
    document.forms[0].elements['current'].value = eval("("+ val +")");

    if(v_cur.length==0){
     $(':checkbox[name=name][checked]').each(function(){
      v_all.push(this.value);
     });
    }else{
     $(':checkbox[name=name][checked]').each(function(index,ele){
      if(!contains(v_cur,ele.value)){
       v_all.push(this.value);//添加本次新选择的项
      }
     });
     
     v_cur = trim(v_cur);
    
     if(v_cur.length>0){
      //删除本次取消的项      
      for(var i=0;i< v_cur.length; i++){
       contains(v_all,v_cur[i]);
      }
     }
    }    
    
    $(':hidden[name=allJSON]').val("["+trim(v_all).join(",")+"]");
    $("form[name='javaScriptArrayForm']").submit();
   } 
   
   //去除空白的元素
   function trim(a){
    if(a.length > 0){
     a = a.sort();       
     while(a[0]=="") a.shift();
    }
    return a;
   }
   
   function contains(a,o){
    for(var i=0; i < a.length; i++){
     if(a[i]==o){
      a[i]="";
      return true;
     }
    }
    return false;
   }
  </script>
 </head>
 <body>
  <html:form action="/jsArray">  
   <html:hidden property="allJSON"/>
   <html:hidden property="method" value="search"/>
   <nested:iterate property="data" indexId="index">
    <html:multibox property="name"><nested:write/></html:multibox><nested:write/><br/>
   </nested:iterate>    
   <a href="javascript:void(0)" onclick="doSearch('-1')">prev</a>
   <html:text property="current" style="width:12px;"/>   
   <a href="javascript:void(0)" onclick="doSearch('+1')">next</a> 
  </html:form>
 </body>
</html>

 

分享到:
评论

相关推荐

    翻页表单提交组件网页模板

    - **下载网页模板.url**:可能是该翻页表单提交组件模板的下载链接,用户可以通过此链接获取完整的模板文件。 - **下载网页特效.url**:可能指向其他网页特效资源,帮助用户扩展网站的交互性和视觉效果。 - **html**...

    jqGrid的翻页导航是一个方法

    根据给定的内容来看,jqGrid的翻页导航可以通过调用`navGrid`方法实现。下面将详细介绍如何使用此方法。 ### 代码分析 #### 1. HTML结构 首先,我们需要为jqGrid准备一个表格元素和一个用于显示分页信息的容器。...

    js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)

    例如,可以使用onsubmit事件监听表单提交,然后通过JavaScript逻辑来决定是否立即提交,或者添加额外的验证步骤。自动提交可以提高用户体验,但需注意防止意外触发。 再者,"滚动图片加载"涉及到页面滚动事件和图片...

    登陆翻页滚动插件

    翻页滚动技术基于JavaScript和可能的jQuery库,通过监听滚动事件来触发页面内容的动态加载。当用户滚动到页面底部或者达到某个特定位置时,插件会向服务器发送请求,获取并插入新的登录页面内容,形成无缝的滚动体验...

    php+jquery+ajax无刷新评论 无刷新翻页,字数统计 绝对可以用

    字数统计功能则相对简单,jQuery可以轻松获取用户在评论框内输入的文本,然后使用JavaScript的内置方法计算字符或单词数量。为了防止用户超过预设的评论长度,可以在输入过程中实时更新剩余可输入字数,并在达到限制...

    vue 翻页时钟网页版.zip

    - **过渡效果**:Vue.js内置的过渡效果库`vue-transition`可以方便地添加翻页动画。 - **CSS3**:可能用到CSS3的动画和转换属性来实现翻页的视觉效果。 通过这个项目,开发者可以学习到Vue.js的组件化开发、数据...

    原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果 下载

    在使用wcPop.js时,开发者可以轻松地自定义提示框的样式、内容和行为。例如,你可以设置文本、图标、按钮数量以及按钮上的文字。此外,库还支持回调函数,允许在用户与提示框交互后执行特定的操作,如点击确认按钮后...

    jquery 非常实用的3个插件(表单验证 图片弹出层全屏左右翻页 弹出层)

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细介绍标题和描述中提到的三个jQuery插件:表单验证、图片弹出层全屏左右翻页以及弹出层。 1. **...

    ASP实例开发源码-宽屏首页列表翻页教程网(带手机版).zip

    这个压缩包“ASP实例开发源码-宽屏首页列表翻页教程网(带手机版).zip”包含了用于教学和实践的ASP代码示例,特别是关于宽屏首页列表的分页功能,同时考虑了移动设备的兼容性。 在ASP中,首页列表翻页通常涉及到...

    wordpress进阶教程(三十):ajax简单示例-ajax翻页

    ajax技术即可以实现异步提交数据,使用ajax,你可以不刷新页面也可以加载下一页的内容。当然本篇教程并不是讲解ajax技术的,如果你不会使用ajax技术,建议参考w3school的相关文档:http://www.w3school.com.cn/ajax/...

    基于PHP的jqueryajax无刷新评论 无刷新翻页,字数统计 绝对可以用.zip

    传统的网页翻页通常需要加载整个新页面,而使用AJAX,我们可以只请求和加载新的评论内容,这样既减少了数据传输量,又加快了页面响应速度。jQuery提供了一系列API,如`.load()`或`$.ajax()`,可以帮助我们轻松实现这...

    jsp实现上一页下一页翻页功能(示例代码)

    前段时间一直忙于期末...当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚。 这个是index.jsp的代码。 index.jsp &lt;&#37;@page import=Bean.D

    PHP实例开发源码—php+jquery+ajax无刷新评论 无刷新翻页,字数统计 绝对可以用.zip

    在这个评论系统中,当用户提交评论或翻页时,AJAX会向PHP脚本发送请求,获取新数据,然后使用JavaScript更新DOM,展示新加载的评论或改变当前页。例如,`$.ajax()`的设置可能包括URL指向PHP处理页面的URL,类型为...

    基于PHP的jqueryajax无刷新评论无刷新翻页,字数统计绝对可以用源码.zip

    在前端,可以使用JavaScript实时监测textarea中的字符数,并显示剩余字符数。当用户输入时,通过事件监听(如`input`事件)触发计数函数。在后端,PHP同样需要验证评论长度,防止恶意输入超出预设限制。 翻页功能是...

    小程序源码 逼真翻页效果.rar

    2. 3D视图:为了达到更真实的翻页效果,可能会使用CSS3的perspective属性创建3D视图,使元素看起来有立体感。 3. 触摸事件:在移动端,用户通过触摸屏幕来翻页,因此需要监听touchstart、touchmove和touchend事件,...

    jsp 使用jstl实现翻页实例代码

    在HTML页面的部分,定义了页面标题和一段JavaScript代码,这段JavaScript代码定义了validate1函数,用于表单提交时的页码验证,确保用户输入有效的页码。 在部分,页面首先输出了检索所花费的时间,然后输出了记录...

    jsp 使用jstl实现翻页实例代码.docx

    ### JSP 使用 JSTL 实现翻页实例详解 #### 一、引言 在Web应用开发中,分页是一项非常实用且常见的功能。通过分页处理,不仅可以提高页面加载速度,还能提升用户体验。JSP(JavaServer Pages)与JSTL(JavaServer ...

    Javascript表格翻页效果实现思路及代码

    在探讨如何使用Javascript实现表格翻页效果之前,首先需要了解翻页效果实现的基本思路。翻页通常是在数据量较大时,为了便于用户阅读和操作,将数据分批次在同一个表格内显示不同的数据片段。每一页显示一部分数据,...

    jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

    为了方便,我们可以为div创建一个同级的form表单,该表单通过rel属性指向需要刷新的div,并通过target属性指定翻页组件的form,这样在提交这个form时,就可以触发相应的局部刷新操作。 接下来,我们将深入探讨如何...

Global site tag (gtag.js) - Google Analytics