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 相关文章推荐
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
使用AOP改善javascript代码
May 01 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python构建自定义回调函数详解
2017/06/20 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python requests.post带head和body的实例
2019/01/02 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
给女儿的表扬信
2014/01/18 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
工作态度检讨书范文
2015/05/06 职场文书