js实现翻页后保持checkbox选中状态的实现方法


Posted in Javascript onNovember 03, 2012

项目中的分页使用真分页,每次点击上下页按钮后,再次调用后台方法查询,重新刷新此页面。所以checkbox为false。

比如酷狗音乐中,上下页选中的歌曲不会保留,只能在每页中选择添加后,再切换下页。

但是项目中有着需求,所以只能完成实现。

项目具体的需求如下:给角色授权时,选择模块以及模块下的操作,点击上下页后选中的checkbox不变。

界面如下:

js实现翻页后保持checkbox选中状态的实现方法

实现的思路如下:

在界面中,使用纯js完成。把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。

每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基础上,再次拼接本界面中选中的id。选中的checkbox,需要判断,若不在id容器中,则加载进来;未选中的checkbox,需要判断,若原来在id容器中,则需要删除;

在页面完全加载完毕后,界面中checkbox与拼接的id字符串容器进行比较,若在字符串容器中,在checkbox自动勾选。否则为false。

提示说明:

因为本思路是把拼接的id作为字符串,则在js中获取action中的选中的id字符串时,需要注意语法。

思路实现代码如下:

java中获取action的id容器:

String ids= (String)request.getAttribute("ids"); 
if((ids==null)){ 
ids=""; 
}

js代码:上一页函数:
function _prePage() 
{ 
var ids="<%=ids%>"; 
var checkedIds= new String(ids); var modules = document.getElementsByName("module"); 
var operates = document.getElementsByName("operate"); 
for ( var i = 0; i < modules.length; i++) { 
if (modules[i].type == "checkbox" && modules[i].checked) { 
if(checkedIds.indexOf(modules[i].value)==-1){ 
checkedIds=checkedIds+modules[i].value+","; 
} 
//判断模块下的操作 
for ( var j = 0; j < operates.length; j++) { 
var operateId = new String(operates[j].id); 
operateId = operateId.substring(0, operateId.indexOf(",")); 
if (modules[i].value == operateId) { 
if (operates[j].type == "checkbox"&& operates[j].checked) { 
if(checkedIds.indexOf(operates[j].value)==-1){ 
checkedIds=checkedIds+operates[j].value+","; 
} 
} 
if(operates[j].checked==false){ 
if(checkedIds.indexOf(operates[j].value)!=-1){ 
checkedIds=checkedIds.replace((operates[j].value+","),""); 
} 
} 
} 
} 
} 
if(modules[i].checked==false){ 
if(checkedIds.indexOf(modules[i].value)!=-1){ 
checkedIds=checkedIds.replace((modules[i].value+","),""); 
} 
} 
} 
with(document.forms[0]) 
{ 
action="roleAuthoriedManager!getModuleOperateBySystem?roleId=" 
+document.getElementById("roleId").value 
+"&systemId="+document.getElementById("systemId").value 
+"&pageNo="+<%=pageModelModule.getPreviousPageNumber()%> 
+"&queryString="+document.getElementById("searchById").value 
+"&ids="+checkedIds; 
method="post"; 
submit(); 
} 
}

在界面完全加载完毕后js代码如下:
document.onreadystatechange=statechange; 
function statechange() 
{ 
var ids="<%=ids%>"; 
var checkedIds= new String(ids); 
if(document.readystate="complete") 
{ 
//循环所有的控件 
var inputs=document.getElementsByTagName("input"); 
for(var i=0;i<inputs.length;i++) 
{ 
if(inputs[i].type=="checkbox") 
{ 
if(checkedIds.indexOf(inputs[i].value)!=-1) 
{ 
inputs[i].checked=true; 
} 
} 
} 
} 
}

说明:在做测试时,但是一直提示,函数未定义,不仅提示下页函数未定义,凡是界面上所有的按钮全部提示未定义。所以纠结了很长时间。解决后,拿出分享下。
遇到这种情况,肯定是页面上有错误。jsp解析成html后,html页面中肯定有语法问题,导致这个html页面无法解析。
开始的js某一句代码:varids=<%=ids%>;
查看源文件时,发现js中下一页的某一句代码解析如下:varids=;
这种语法问题,肯定无法解析,所以才一直无法运行。
出现这种情况的原因是:var ids=<%=ids%>;从action传过来id容器是空串,所以解析后就成var ids=;
因为把id容器当作字符串,所以需要var ids="<%=ids%>"即使传过来的是空串,解析结果如下:var ids="";
总结:遇到整个页面的js函数都无法执行,肯定说明js有问题,某个js函数中的语法问题,导致整个页面无法解析运行。若是某个js函数未定义,则有可能是函数名与标签定义的函数不相同。若是某个js函数中某个语句中某个字符未定义,则会明确提示未定义的字符。
Javascript 相关文章推荐
jquery下json数组的操作实现代码
Aug 09 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
jQuery 联动日历实现代码
May 31 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue interceptor 使用教程实例详解
Sep 13 Javascript
js实现打字小游戏
Dec 17 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 #Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 #Javascript
JS TextArea字符串长度限制代码集合
Oct 31 #Javascript
JS 控件事件小结
Oct 31 #Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 #Javascript
fancybox modal的完美解决(右上的X)
Oct 30 #Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
写一个用户在线显示的程序
2006/10/09 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
动态加载js的几种方法
2006/10/23 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Python 正则表达式操作指南
2009/05/04 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Django入门使用示例
2017/12/12 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python scatter函数用法实例详解
2020/02/11 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
财政局长自荐信范文
2013/12/22 职场文书
会计系中文个人求职信
2013/12/24 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
集体生日活动方案
2014/08/18 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Vue监视数据的原理详解
2022/02/24 Vue.js
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android