Paramquery (jquery grid Plugin-pqgrid, jquery INS)

Advantages: open-source,Can be modified by yourselfCodeThe skin can also be customized and can be independently introduced (no need to copy a bunch of irrelevant items). This is suitable for simple background projects.
Official Website: http://paramquery.com/
On infoq, paramquery is described as follows:

 
SortPagingBrowsing is acceptableAdjust data barThe table height and width can be adjusted.Custom topicHide or show columns as in ExcelFreezeDisplay of any multiple columnsAny data source format, such as HTML, array, XML, JSON, etc.It can be used in any server framework, such as ASP. NET, mvc3, JSP, JSF, PHP, etc. Virtual scrolling and rendering directly edit cells in all mainstream browsers (ie6+, Firefox, chrome, opera, etc.)Consistent appearance and functions
 

 

The simplest Demo:

As follows:

Steps:
Add references to jquery and jquery UI to the HTML head first:

 < Link  REL  = "Stylesheet"  Href  = "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css"   />  <  Script  SRC  = "// Ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"  > </  Script  >         <! -- CDN connections are used (Adaptive HTTP and HTTPS switching), so "//" is directly used at the beginning of SRC --> <  Script  SRC  = "// Ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"  > </  Script  ><! -- Same as above --> 

 

Add a reference to Param query grid:

<LinkREL= "Stylesheet"Href= "/Content/pqgrid/pqgrid.min.css" /><! -- This CSS file must be referenced. Whether you use the skin or the skin, you must reference it. --><ScriptType= "Text/JavaScript"SRC= "/Scripts/pqgrid. Min. js" > </Script><! -- This JS file must be referenced -->
 

 

Add script code:

$ (Function  (){  VaR Data = [[1, 'exxon Mobil ', '20160301', '20160301' ], [ 2, 'wal-Mart stores', '123', '123' ], [ 3, 'Royal Dutch shell', '123', '123' ], [ 4, 'bp ', '123', '123' ], [ 5, 'General Motors ', '000000','-192,604.0' ], [ 6, 'chevron ', '123', '123'], [ 7, 'daimlerchrysler ', '123', '123' ], [ 8, 'toyota motor', '123', '123' ], [ 9, 'Ford motor', '123', '123' ], [ 10, 'conoopillips ', '20170301', '20160301' ], [ 11, 'General electric', '123', '123' ], [ 12, 'Total', '123', '123' ], [ 13, 'ing group', '123', '123'], [ 14, 'citigroup ', '123', '123' ], [ 15, 'axa', '123', '123' ], [ 16, 'alliance', '20140901', '20140901' ], [ 17, 'volkswagen', '123', '123' ], [ 18, 'fortis ', '123', '123' ], [ 19, 'cédit w.cole ', '123', '123' ], [ 20, 'American intl. group', '123', '123'];  VaR OBJ = {}; Obj. Width = 700 ; Obj. Height = 400 ; Obj. colmodel = [{Title: "rank", width: 100, datatype: "integer" },{ Title: "Company", width: 200, datatype: "string" },{ Title: "Revenues ($ millions)", width: 150, datatype: "float", align: "right" },{ Title: "Profits ($ millions)", width: 150, datatype: "float", align: "right"}]; Obj. datamodel = {Data: Data}; $ ( "# Grid_array" ). Pqgrid (OBJ );}); 

 

Finally, add the DIV element to the display area to display the table:

 
<DivID= "Grid_array"> </Div>
 

 

Run the command to see the effect.

Demo with theme skin added:

As follows:

Steps:
The Logic Part Of The JS Code has not changed, haha.
Add a style reference to the head of HTML, as shown below:

 <  Link  REL  = "Stylesheet"  Href  = "/Content/pqgrid/pqgrid.min.css"   />                 <! -This sentence is added, and there are no other changes... haha->  <  Link  REL  = "Stylesheet"  Href = "/Content/pqgrid/themes/peach/pq-grid.css"   />  <  Script  Type  = "Text/JavaScript"  SRC  = "/Scripts/pqgrid. Min. js"   > </  Script  > 

 

That's it...

 

TIPS:CSS, JS files used in this article are the official website download self-carried, download URL: http://paramquery.com/download