这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在项目中有需求如下:上下分页后,选中的 checkbox 状态保持不变
项目中的分页使用真分页,每次点击上下页按钮后,再次调用后台方法查询,重新刷新此页面。所以 checkbox 为 false。
比如酷狗音乐中,上下页选中的歌曲不会保留,只能在每页中选择添加后,再切换下页。
但是项目中有着需求,所以只能完成实现。
项目具体的需求如下:给角色授权时,选择模块以及模块下的操作,点击上下页后选中的 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 函数中某个语句中某个字符未定义,则会明确提示未定义的字符。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0702/281509.html