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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
js模拟微博发布消息
Feb 23 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
JavaScript实现简单计时器
Jun 22 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微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
np.dot()函数的用法详解
2020/01/17 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python温度转换华氏温度实现代码
2020/12/06 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
评奖评优个人先进事迹材料
2015/11/04 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
python如何读取和存储dict()与.json格式文件
2022/06/25 Python