js實(shí)現(xiàn)翻頁后保持checkbox選中狀態(tài)的實(shí)現(xiàn)方法

更新時(shí)間：2012年11月03日 01:12:28 作者：

在項(xiàng)目中有需求如下：上下分頁后，選中的checkbox狀態(tài)保持不變

項(xiàng)目中的分頁使用真分頁，每次點(diǎn)擊上下頁按鈕后，再次調(diào)用后臺(tái)方法查詢，重新刷新此頁面。所以checkbox為false。

比如酷狗音樂中，上下頁選中的歌曲不會(huì)保留，只能在每頁中選擇添加后，再切換下頁。

但是項(xiàng)目中有著需求，所以只能完成實(shí)現(xiàn)。

項(xiàng)目具體的需求如下：給角色授權(quán)時(shí)，選擇模塊以及模塊下的操作，點(diǎn)擊上下頁后選中的checkbox不變。

界面如下：

實(shí)現(xiàn)的思路如下：

在界面中，使用純js完成。把選中的checkbox中的id，其中包括模塊id，操作id，拼接成一個(gè)字符串，然后把字符串傳遞到action中。

每次調(diào)用此頁面時(shí)，首選調(diào)用action中的選中的id字符串，然后根據(jù)在id字符串的基礎(chǔ)上，再次拼接本界面中選中的id。選中的checkbox，需要判斷，若不在id容器中，則加載進(jìn)來；未選中的checkbox，需要判斷，若原來在id容器中，則需要?jiǎng)h除；

在頁面完全加載完畢后，界面中checkbox與拼接的id字符串容器進(jìn)行比較，若在字符串容器中，在checkbox自動(dòng)勾選。否則為false。

提示說明：

因?yàn)楸舅悸肥前哑唇拥膇d作為字符串，則在js中獲取action中的選中的id字符串時(shí)，需要注意語法。

思路實(shí)現(xiàn)代碼如下：

java中獲取action的id容器：

復(fù)制代碼代碼如下:

 
String ids= (String)request.getAttribute("ids"); 
if((ids==null)){ 
ids=""; 
} 

js代碼：上一頁函數(shù)：

復(fù)制代碼代碼如下:

 
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代碼如下：

復(fù)制代碼代碼如下:

 
document.onreadystatechange=statechange; 
function statechange() 
{ 
var ids="<%=ids%>"; 
var checkedIds= new String(ids); 
if(document.readystate="complete") 
{ 
//循環(huán)所有的控件 
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; 
} 
} 
} 
} 
} 

說明：在做測試時(shí)，但是一直提示，函數(shù)未定義，不僅提示下頁函數(shù)未定義，凡是界面上所有的按鈕全部提示未定義。所以糾結(jié)了很長時(shí)間。解決后，拿出分享下。
遇到這種情況，肯定是頁面上有錯(cuò)誤。jsp解析成html后，html頁面中肯定有語法問題，導(dǎo)致這個(gè)html頁面無法解析。
開始的js某一句代碼：varids=<%=ids%>;
查看源文件時(shí)，發(fā)現(xiàn)js中下一頁的某一句代碼解析如下：varids=;
這種語法問題，肯定無法解析，所以才一直無法運(yùn)行。
出現(xiàn)這種情況的原因是：var ids=<%=ids%>;從action傳過來id容器是空串，所以解析后就成var ids=;
因?yàn)榘裪d容器當(dāng)作字符串，所以需要var ids="<%=ids%>"即使傳過來的是空串，解析結(jié)果如下：var ids="";
總結(jié)：遇到整個(gè)頁面的js函數(shù)都無法執(zhí)行，肯定說明js有問題，某個(gè)js函數(shù)中的語法問題，導(dǎo)致整個(gè)頁面無法解析運(yùn)行。若是某個(gè)js函數(shù)未定義，則有可能是函數(shù)名與標(biāo)簽定義的函數(shù)不相同。若是某個(gè)js函數(shù)中某個(gè)語句中某個(gè)字符未定義，則會(huì)明確提示未定義的字符。

您可能感興趣的文章: