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 相关文章推荐
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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扩展函数
2006/10/09 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
Javascript模板技术
2007/04/27 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python删除列表内容
2015/08/04 Python
Python字符串处理实现单词反转
2017/06/14 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python实现的建造者模式示例
2018/08/06 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python 实现多线程下载视频的代码
2019/11/15 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python实现扫雷游戏的示例
2020/10/20 Python
python Pexpect模块的使用
2020/12/25 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
小学教师管理制度
2014/01/18 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
环保倡议书格式范文
2014/05/14 职场文书
讲党性心得体会
2014/09/03 职场文书
社区重阳节活动总结
2015/03/24 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
springboot实现string转json json里面带数组
2022/06/16 Java/Android