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 日期验证正则附asp日期格式化函数
Sep 11 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
浅谈react useEffect闭包的坑
Jun 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中的日期处理方法集锦
2007/01/02 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php阳历转农历优化版
2016/08/08 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
js实现日期级联效果
2014/01/23 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
python中global用法实例分析
2015/04/30 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
什么是规则表达式
2012/05/03 面试题
高考备战决心书
2014/03/11 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
先进员工获奖感言
2014/08/14 职场文书
公司委托书格式范文
2014/10/09 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书