Js Implementation Method for retaining the checkbox selected status after turning pages

The project uses real paging. After you click the top or bottom page button each time, you can call the background method query again to refresh the page. So checkbox is false.

For example, in codoy music, the selected songs on the top and bottom pages are not retained. You can only select Add on each page and switch to the next page.

But there are requirements in the project, so the implementation can only be completed.

The specific requirements of the project are as follows: When authorizing a role, select the module and the operations under the module, and click the checkbox on the top and bottom pages.

The interface is as follows:

The implementation idea is as follows:

In the interface, use pure js. Concatenates the id in the selected checkbox, including the module id and operation id, into a string, and then passes the string to the action.

Each time you call this page, you are preferred to call the selected id string in action, and then splice the selected id in this interface based on the id string. Check the selected checkbox. If it is not in the id container, load it. If it is not in the selected checkbox, check it. If it is in the id container, delete it;

After the page is fully loaded, the checkbox in the interface is compared with the spliced id string container. If it is in the string container, it is automatically selected in the checkbox. Otherwise, the value is false.

Note:

Because this idea is to use the spliced id as a string, you need to pay attention to the syntax when obtaining the selected id string in action in js.

The implementation code is as follows:

Java:

Copy codeThe Code is as follows: String ids = (String) request. getAttribute ("ids ");
If (ids = null )){
Ids = "";
}

Js Code: Previous Page function:Copy codeThe Code is as follows: 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 + ",";
}
// Determine the operation under the module
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 ();
}
}

After the interface is fully loaded, the js Code is as follows:Copy codeThe Code is as follows: document. onreadystatechange = statechange;
Function statechange ()
{
Var ids = "<% = ids %> ";
Var checkedIds = new String (ids );
If (document. readystate = "complete ")
{
// Loop all controls
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;
}
}
}
}
}

Note: During the test, the system always prompts that the function is undefined, not only prompting that the function is undefined on the next page, but prompting that all the buttons on the interface are undefined. So it took a long time to struggle. After solving the problem, share it with you.
In this case, there must be an error on the page. After jsp is parsed into html, there must be a syntax problem on the html page, leading to the inability to parse the html page.
A JavaScript code at the beginning: varids = <% = ids %>;
When viewing the source file, I found that the code for the next page in js is parsed as follows: varids =;
This syntax problem cannot be resolved, so it is unable to run.
The cause of this situation is: var ids = <% = ids %>; the id container passed from the action is an empty string, so after parsing it, it becomes var ids =;
Because the id container is treated as a string, var ids = "<% = ids %>" is required. Even if the passed string is empty, the parsing result is as follows: var ids = "";
Conclusion: When JavaScript Functions on the entire page cannot be executed, it must be indicated that JavaScript has a problem. the syntax of a js function causes the entire page to fail to be parsed and run. If a js function is not defined, the function name may be different from the function defined by the tag. If a character in a statement in a js function is not defined, an undefined character is prompted.