The JQuery Easyui DataGrid can still record the implementation code of the selected row after paging _jquery

1, first give the code after the problem is resolved

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <%@ taglib prefix= "C" uri= "http://"
Java.sun.com/jstl/core_rt "%> <% String Path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/"; %> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

2, the page probably looks like

3, problems and solutions, the problem layer by layer, the premise of each problem is the previous problem has been resolved.

Known: a normal DataGrid table.

Question 1: How to make the page turn.

Front desk: Pagination:true, indicating paging toolbar.

Background:

@RequestMapping ("/getgoodsonsale")
@ResponseBody public
gridmodel Getgoodsonsale (httpservletrequest Request, @RequestParam ("page") integer page,
@RequestParam ("Rows") Integer rows {
integer userright = (integer ) (Logincontroller.getfromsession (Request, constantsutil.session_user_right));
list<goods> goods = new arraylist<goods> ();
Long total = new Long ();
if (Userright.equals (constantsutil.user_rights_admin)) {
goods = Goodsservice.getgoodsonsale (page, rows);
Total = Goodsservice.getgoodsonsalecount ();
} else{
list<brand> brands = (list<brand>) (Logincontroller.getfromsession (Request, Constantsutil.session_user_brands));
Goods = Goodsservice.getgoodsonsale (brands,page, rows);
Total = Goodsservice.getgoodsonsalecount (brands);
}
Gridmodel Gridmodel = getgoods (goods, request);
Gridmodel.settotal (total);
return gridmodel;
}

Description: Background from the Request.getparameter two parameters, page and rows, respectively, representing the current number of pages and each page to display a few rows of data. Total is the number of data.

Gridmodel class:

public class Gridmodel {
private List rows= new ArrayList ();
Private Long total=0l;
Public List GetRows () {return
rows;
}
public void Setrows (List rows) {
this.rows = rows;
}
Public Long Gettotal () {return total
;
}
public void Settotal (Long total) {
this.total = total;
}
}

Question 2: How do i show a checkbox in the first column of the DataGrid table, and make row and checkbox selection equal?

For:

1, Singleselect:false, set the table for check mode

2, {field: ' CK ', checkbox:true}, which checkbox:true indicates that the column displays a check button.

2, view Easyui documents: http://www.jeasyui.net/plugins/183.html can learn two properties--checkonselect and Selectoncheck.

Checkonselect: If set to true, when the user clicks on a row, the check box is selected/unchecked. When set to False, the check box is selected/unchecked only when the user clicks the check box.

Selectoncheck: If set to True, clicking the check box will select the row. If set to False, selecting the row does not select the check box.

So, set these two properties to true.

Question 3: How to save the primary key of the selected row before the page is run

A: This problem can be broken down into the following two questions:

1. How to save the checked rows

Because the page is back to the background to remove the data, that is, the process of reloading the data, so you can consider when onbeforeload to do related processing.

First define the array Idsarray to hold the primary key of the selected row, and then use $dg.datagrid (' getselections ') to get the selected row. That's 105 lines of the way addselectedgoodsidtoarray do things.

Look at the image above, click "Next" is the current DataGrid in the selected content submitted to the background processing, that is, the page function NextStep () to do, so in netstep () need to first execute

Addselectedgoodsidtoarray, save the selected content, otherwise when the data is submitted to the background, the currently selected row does not exist because the current page's addselectedgoodsidtoarray does not trigger execution.

2. How to remove the selected row from the saved record

After testing, after I set both Checkonselect and Selectoncheck to True, Onclickrow automatically calls Oncheck or Onuncheck when called (note the spelling here, the first letter of the last check is lowercase, If you mistakenly

is invalidated when written in uppercase, and Oncheck and Onuncheck do not automatically invoke Onclickrow when executed. So, if we want to do something after the user cancels the line, just do it in the Onuncheck. This is what 52 of lines do.

Question 4: How do I automatically select the selected row after the DataGrid data is loaded?

A: Because paging is the process of removing a page of data back to the background, which means reloading the data. So as long as the onloadsuccess to solve the problem, then when the page forward, the previously selected line will be automatically checked.

1, the Onloadsuccess method is passed in the data parameter, its data.rows () represents the current DataGrid.

2. $dg. DataGrid (' SelectRow ', index); Select the data in the index row. Here the index starts from zero, and index does not equal the primary key of the current row's data, but the natural line number of the table.

3, Data.rows (). Goodsid: Gets the value of the Goodsid property of the current row data

Know the above three points, probably clear, traversing Idsarray, the current row of the primary key to match, matching on the tick.

Notice the 3rd, we choose a column of values if the column is displayed in the table, if you want to hide it, just hidden:true.

The above is a small set to introduce the jquery Easyui DataGrid after the page can still record the implementation code of the selected line, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!