JQuery EasyUI datagrid can still record the implementation code of the selected row after turning pages. jqueryeasyui

JQuery EasyUI datagrid can still record the implementation code of the selected row after turning pages. jqueryeasyui

1. The code after the problem is solved first

<% @ 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. page overview

3. Questions and Answers: the premise of each problem is that the previous problem has been solved.

Known: A common datagrid table.

Question 1: How to turn pages.

Foreground: pagination: true, indicating that the pagination toolbar is displayed.
Background:
@RequestMapping("/getGoodsOnSale")@ResponseBodypublic 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;}
Note: two parameters, page and rows, are retrieved from request. getParameter in the background, representing the current page number and several lines of data displayed on each page. Total is the total 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 can I display the checkbox in the first column of the datagrid table and make the row selection and checkbox selection equal?
A:

1. singleSelect: false. Set the table to the check mode.

2. {field: 'ck ', checkbox: true}. the checkbox: true indicates that the check button is displayed for this column.

2. View easyUI documents: http://www.jeasyui.net/plugins/183.htmlyou can know two samples --checkonselectand selectoncheck.

CheckOnSelect: if it is set to true, when a user clicks a row, the check box is selected/deselected. If it is set to false, the check box is selected/unselected only when the user clicks the check box.

SelectOnCheck: if it is set to true, click the check box to select this row. If it is set to false, the check box is not selected when this row is selected.

Therefore, set these two attributes to true.

Question 3: how to save the primary key of the selected row before turning the page

A: This problem can be divided into the following two problems:

1. How to save the selected rows

Because page turning is the process of retrieving the next page data from the background, that is, reloading the data, you can consider processing the data in onBeforeLoad.

Define an array idsArray to save the primary key of the selected row, and then use $ dg. datagrid ('getselections') to obtain the selected row. That is, what the method addSelectedGoodsIdToArray Of the 105 rows does.

Next, let's take a look at the approximate picture posted above. Click "Next" to submit the selected content in the current datagrid to the background for processing, that is, the function nextStep () on the page, therefore, in netStep (), you must first execute

Click addSelectedGoodsIdToArray to save the selected content. Otherwise, when the data is submitted to the background, the selected row on the current page is not saved because the current addSelectedGoodsIdToArray does not trigger execution.

2. How to delete the unselected row from the saved record

After testing, after I set both checkOnSelect and selectOnCheck to true, onClickRow will automatically call onCheck or onUncheck when called (note the spelling here, the first letter of the last check is lowercase.

The onClickRow is not automatically called when onCheck and onUncheck are executed. Therefore, if you want to do something after unchecking a row, you just need to do it in onUncheck. This is what 52 rows do.

Question 4: How can I automatically select the selected row after the datagrid data is loaded?

A: turning pages is a process of re-loading data from the background to the next page. So as long as you solve this check problem in onLoadSuccess, when you flip the page forward, the previously selected rows will be automatically checked.

1. The data parameter passed in the onLoadSuccess method. Its data. rows () indicates the data in the current datagrid.

2. $ dg. datagrid ('selectrow', index); select the data in the index row. The index starts from scratch. The index is not equal to the primary key of the data of the current row, but the natural row number of the table.

3. data. rows (). goodsId: obtains the value of the goodsId attribute of the current row data.

After knowing the above three points, we will probably be clear. Traverse idsArray and match the primary key of the current row. If it matches, we will check it.

Note that the third step is to select a column value so that the column is displayed in the table. To hide the column value, you only need to hidden: true.

The above section describes the jQuery EasyUI datagrid that can still record the implementation code of the selected row after turning pages. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!