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验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
基于Python正确读取资源文件
2020/09/14 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
结婚保证书
2015/01/16 职场文书
党校个人总结
2015/03/04 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python