JqGrid display table, jqgrid display table

JqGrid display table, jqgrid display table

JqGrid is a front-end table display library, which is quite convenient to use.
Here we will share with you the problems encountered during use and solutions.
**

1. rowNum attributes

**
1. If this parameter is not set, the default display number is 20, that is, data that exceeds 20. Not displayed. This attribute is often ignored when JqGrid is used for the first time, resulting in problems in later display.

2.-1
When rowNum =-1, ignore the check of the maximum value of the displayed row. Once and for all. Data can be displayed. However, when rowNum =-1 is set, the table cannot display the data of the last row.
The display data is obtained locally (datatype: "local"). The last line cannot be displayed during debugging. It is probably a bug in JqGrid. Be careful when using it.

3. Based on the 1, 2 rowNum value, it is best to set it to the maximum value of real data. Is a dynamic value.

4. Set rowNum to the maximum value of real data. Some may think that dynamic rows cannot be added. In fact, this is not the case. The rowNum check only occurs when the table is loaded at the initial stage.

**

Ii. sortable attributes

**
Sorting function:
Sorting is performed only when data is fully loaded. Therefore, the sortable attribute must be placed behind the colModel attribute. Otherwise, the data is not completely displayed and the parameters are set as follows.

$("#security").jqGrid({    datatype :"local",    data :data,    mtype :"POST",    colNames :colNames,    colModel :colModel,    height :226,    sortable :true,    cellEdit :false,    rowNum : data.length});

3. dynamically set css for each cell
Set css dynamically for cells. You can set the gridComplete attribute after the table is fully loaded.

GridComplete: function () {// get all row IDs var rowIds =$ ("# data "). getDataIDs (); for (var index = 0; index <rowIds. length; index ++) {var $ tr = $ ("#" + rowIds [index]); // The var rowFlg of the row background flag =$ ("# data "). getRowData (index ). rowFlg; var background = ""; if (rowFlg = "1") {background = "add";} else if (rowFlg = "2 ") {background = "delete" ;}else {background = "update" ;}$ tr. addClass (background); // sets the background of each cell $ tr. find ("td: eq (3 )"). addClass ($ ("# data "). getCell (rowIds [index], "Flg3"); $ tr. find ("td: eq (4 )"). addClass ($ ("# data "). getCell (rowIds [index], "Flg4"); $ tr. find ("td: eq (5 )"). addClass ($ ("# data "). getCell (rowIds [index], "Flg5 "));}}

The above are the problems and solutions currently encountered during development. Further Supplement