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 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
javascript 数组操作详解
Jan 29 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
详解JavaScript的this指向和绑定
Sep 08 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
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
python计算N天之后日期的方法
2015/03/31 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
python正则表达式之作业计算器
2016/03/18 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python实现Zabbix-API监控
2018/09/17 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python常量折叠基础知识点讲解
2021/02/28 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2016年安全月活动总结
2016/04/06 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python