Jqgrid Display Table

Source: Internet
Author: User
Tags jqgrid

Jqgrid is a table display library at the front desk, which is very convenient to use.
Here to share the problems and solutions I encountered in the process of using
**

I. RowNum properties

**
1. If not set, the default display number is 20, that is, more than 20 after the data. No longer show up. The initial use of Jqgrid often ignores this attribute, resulting in problems with post-display

2.-1
Rownum=-1 the check that displays the maximum value of a row when missing. Once. How the data can be displayed. But I found in the use process when setting rownum=-1, the table cannot display the last row of data
Show data from local fetch (datatype: "local"), how the debug discovery cannot display the last row. An estimate is a bug in Jqgrid. You must be careful when using it.

3. It is best to set the maximum value for real data based on the rownum value. is a dynamic value.

The 4.rowNum is set to the maximum value of the real data. Some might think that dynamic row additions cannot be made. In fact, this is not the case, rownum check, will only occur when the initial loading of the table.

**

Two. Sortable properties

**
sorting function:
Sorting is necessary to load the data completely before sorting, so the sortable property must be placed behind the Colmodel property, otherwise the data is not displayed completely, the following settings

$("#security").jqGrid({    :"local",    :data,    :"POST",    :colNames,    :colModel,    :226,    :true,    :false,    : data.length});

Three. Dynamically set CSS for each cell
Dynamically set CSS for the cell. You can set the Gridcomplete property after the table is loaded completely

Gridcomplete: function() {    //Get all row IDs    varRowIds = $ ("#data"). Getdataids (); for(varindex =0; Index < rowids.length; index++) {var$TR = $ ("#"+ Rowids[index]);//row background flag bit        varROWFLG = $ ("#data"). GetRowData (index). Rowflg;varBackground ="";if(ROWFLG = ="1") {background ="Add"; }Else if(ROWFLG = ="2") {background ="Delete"; }Else{background ="Update"; } $tr. addclass (background);//Set each cell background$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 is the current development encountered problems, and solutions. Follow-up Continue to supplement

Jqgrid Display Table

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.