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 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
浅析Yii2中GridView常见操作
2016/04/22 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
幼儿园感谢信
2015/01/21 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP