This time I will share jQuery Plugin and tutorial about Dynamic Grids Plugin with jQuery – ParamQuery Grid, hope it will help you in programming stack.
ParamQuery is a jQuery Grid Plugin for displaying the data in an MS Excel like Data Grid with a lot of options. It also can display any data source format like HTML, Array, XML, JSON, etc.
ParamQuery works with jQueryUI Widget factory which is an excellent design pattern for UI controls with consistent API.
You might also like:
How to use it:
1. Include jQuery Library, jQuery UI and pqgrid.min.js
3 |
<script src="pqgrid.min.js"></script> |
2. Include CSS
2 |
<link rel="stylesheet" href="pqgrid.min.css" /> |
3. Call the plugin and insert the data
02 |
var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'], |
03 |
[2, 'Wal-Mart Stores', '315,654.0', '11,231.0'], |
04 |
[3, 'Royal Dutch Shell', '306,731.0', '25,311.0'], |
05 |
[4, 'BP', '267,600.0', '22,341.0'], |
06 |
[5, 'General Motors', '192,604.0', '-10,567.0'], |
07 |
[6, 'Chevron', '189,481.0', '14,099.0'], |
08 |
[7, 'DaimlerChrysler', '186,106.3', '3,536.3'], |
09 |
[8, 'Toyota Motor', '185,805.0', '12,119.6'], |
10 |
[9, 'Ford Motor', '177,210.0', '2,024.0'], |
11 |
[10, 'ConocoPhillips', '166,683.0', '13,529.0'], |
12 |
[11, 'General Electric', '157,153.0', '16,353.0'], |
13 |
[12, 'Total', '152,360.7', '15,250.0'], |
14 |
[13, 'ING Group', '138,235.3', '8,958.9'], |
15 |
[14, 'Citigroup', '131,045.0', '24,589.0'], |
16 |
[15, 'AXA', '129,839.2', '5,186.5'], |
17 |
[16, 'Allianz', '121,406.0', '5,442.4'], |
18 |
[17, 'Volkswagen', '118,376.6', '1,391.7'], |
19 |
[18, 'Fortis', '112,351.4', '4,896.3'], |
20 |
[19, 'Crit Agricole', '110,764.6', '7,434.3'], |
21 |
[20, 'American Intl. Group', '108,905.0', '10,477.0']]; |
24 |
var obj = { width: 700, height: 400, title: "ParamQuery Grid Example",resizable:true,draggable:true }; |
25 |
obj.colModel = [{ title: "Rank", width: 100, dataType: "integer" }, |
26 |
{ title: "Company", width: 200, dataType: "string" }, |
27 |
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right" }, |
28 |
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right"}]; |
29 |
obj.dataModel = { data: data }; |
31 |
$("#grid_array").pqGrid(obj); |
4. The basic markup.
1 |
<div id="grid_array" style="margin:100px;"></div> |
5. All default config options.
001 |
cancel: "input,textarea,button,select,option,.ui-resizable-handle,div[contenteditable],.pq-draggable", |
008 |
refreshAfterExpand: true, |
032 |
reInt: /^([-]?[1-9][0-9]*|[-]?[0-9]?)$/, |
033 |
reFloat: /^[-]?[0-9]*.?[0-9]*$/, |
034 |
onBlur: "vali<a href="https: |
035 |
saveKey: $.ui.keyCode.ENTER, |
038 |
invalidClass: "pq-cell-red-tr pq-has-tooltip", |
039 |
warnClass: "pq-cell-blue-tr pq-has-tooltip", |
