page_javascriptスキルを切り替えた後もチェックボックスを選択したままにするjs実装方法

プロジェクトのページングでは、ページの上下ボタンをクリックするたびに、バックグラウンド メソッドのクエリが再度呼び出され、ページが更新されます。したがって、チェックボックスは false です。

たとえば、Kugou Music では、前と次のページで選択した曲は保持されず、各ページで選択して追加してから次のページに切り替えることしかできません。

しかし、プロジェクトには要件があるため、実装を完了することしかできません。

プロジェクトの具体的な要件は次のとおりです。ロールを承認するときに、モジュールとそのモジュールの下の操作を選択します。選択されたチェックボックスは、前ページと次ページをクリックしても変化しません。

インターフェースは次のとおりです:

実装のアイデアは次のとおりです:

インターフェースでは、pure jsを使用して完成します。選択したチェックボックスの ID (モジュール ID とオペレーション ID を含む) を文字列に連結し、その文字列をアクションに渡します。

このページが呼び出されるたびに、アクションで選択された ID 文字列が最初に呼び出され、次に ID 文字列に基づいて、このインターフェイスで選択された ID が再度結合されます。選択されたチェックボックスが id コンテナーにない場合は、そのチェックボックスがロードされる必要があります。元の ID コンテナーにある場合は、それを削除する必要があります。

ページが完全にロードされた後、インターフェースのチェックボックスが、結合された ID 文字列コンテナーと比較され、文字列コンテナー内にある場合は、チェックボックスが自動的にチェックされます。それ以外の場合は false。

ヒント:

このアイデアは、結合された ID を文字列として使用することであるため、JS のアクションで選択された ID 文字列を取得するときは構文に注意する必要があります。

アイデアの実装コードは次のとおりです:

Java でアクションの ID コンテナーを取得します:

コードをコピーします コードは次のとおりです:

文字列 ids= (String)request.getAttribute("ids");
if((ids==null)){
ids="";


js コード: 前のページの関数:

コードをコピー コードは次のとおりです:

function _prePage()

{
var ids="";
var selectedIds= new String(ids);

var modules = document.getElementsByName ("モジュール");
var opens = document.getElementsByName("operate");

for ( var i = 0; i if (モジュール[i].type == "checkbox" && modules[i].checked) {
if(checkedIds.indexOf(modules[i].value)==-1){
checkedIds=checkedIds modules[i ].value ",";
}
//モジュール下の操作を判断します
for ( var j = 0; j var operatId = new String (operates[j].id) ;
operateId = operatId.substring(0, OperateId.indexOf(","));
if (modules[i].value == operatId) {
if (operates[j].type = = "checkbox"&&operates[j].checked) {
if(checkedIds.indexOf(operates[j].value)==-1){
checkedIds=checkedIds は動作します[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="
"&queryString=" document.getElementById("searchById").value
"&ids=" selectedIds"
submit();
}
}


インターフェースが完全にロードされた後の js コードは次のようになります:

コードをコピーします コードは次のとおりです。 document.onreadystatechange=statechange;

function statechange()

{
var ids="";
var selectedIds = new String(ids);
if(document.readystate="complete")
{
//すべてのコントロールをループします
var inputs=document.getElementsByTagName("input");
for(var i=0;i{
if(inputs[i].type=="checkbox")
{
if(checkedIds.indexOf(inputs[i].value)!=-1)
{
inputs[i].checked=true;
}
}
}
}
}


注: テストの実行中、関数が未定義であることを示すプロンプトが表示され続けました。次のページの関数が未定義であることを示すプロンプトが表示されるだけでなく、インターフェイス上のすべてのボタンもその関数が未定義であることを示すプロンプトを表示しました。それで長い間苦労しました。解決したら共有してください。
この場合、ページにエラーがあるはずです。 jsp が html に解析された後、html ページに文法上の問題が発生し、html ページを解析できなくなるはずです。
冒頭のjsコードのとある文: varids=;
ソースファイルを見ると、jsの次のページのコードのある文が次のように解析されていることがわかりました。以下: varids=;
この種の構文に問題があり、解析できないため、実行できませんでした。
この状況の理由は次のとおりです: var ids=; アクションから渡された ID コンテナーは空の文字列であるため、解析後は var ids=; になります。は文字列として扱われます。 var ids="" が必要です。 空の文字列が渡された場合でも、解析結果は次のようになります。 var ids=""; が発生した場合ページ全体の js 関数を実行できない場合は、js に何らかの問題があることを意味します。これにより、ページ全体を解析して実行できなくなります。 js関数が定義されていない場合、関数名がタグで定義されている関数と異なる可能性があります。 js 関数のステートメント内の文字が未定義の場合、未定義の文字が明確にプロンプ​​ト表示されます。