Dynamic Grids Plugin with jQuery - ParamQuery Grid

Dynamic Grids Plugin with jQuery - ParamQuery Grid
File Size: 225 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ParamQuery is a jQuery Grid Plugin for displaying the data in a 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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="pqgrid.min.js"></script>

2. Include CSS

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="pqgrid.min.css" />

3. Call the plugin and insert the data

$(function () {
  var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
      [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
      [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
      [4, 'BP', '267,600.0', '22,341.0'],
      [5, 'General Motors', '192,604.0', '-10,567.0'],
      [6, 'Chevron', '189,481.0', '14,099.0'],
      [7, 'DaimlerChrysler', '186,106.3', '3,536.3'],
      [8, 'Toyota Motor', '185,805.0', '12,119.6'],
      [9, 'Ford Motor', '177,210.0', '2,024.0'],
      [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
      [11, 'General Electric', '157,153.0', '16,353.0'],
      [12, 'Total', '152,360.7', '15,250.0'],
      [13, 'ING Group', '138,235.3', '8,958.9'],
      [14, 'Citigroup', '131,045.0', '24,589.0'],
      [15, 'AXA', '129,839.2', '5,186.5'],
      [16, 'Allianz', '121,406.0', '5,442.4'],
      [17, 'Volkswagen', '118,376.6', '1,391.7'],
      [18, 'Fortis', '112,351.4', '4,896.3'],
      [19, 'Crit Agricole', '110,764.6', '7,434.3'],
      [20, 'American Intl. Group', '108,905.0', '10,477.0']];


  var obj = { width: 700, height: 400, title: "ParamQuery Grid Example",resizable:true,draggable:true };
  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);

}); 

4. The basic markup.

<div id="grid_array" style="margin:100px;"></div>

5. All default config options.

cancel: "input,textarea,button,select,option,.ui-resizable-handle,div[contenteditable],.pq-draggable",
distance: 3,
collapsible: {
  on: true,
  collapsed: false,
  _collapsed: false,
  refreshAfterExpand: true
},
colModel: null,
columnBorders: true,
dataModel: {
  cache: false,
  dataType: "JSON",
  location: "local",
  sorting: "local",
  sortDir: "up",
  method: "GET"
},
direction: "",
draggable: false,
editable: true,
editModel: {
  cellBorderWidth: 0,
  clicksToEdit: 1,
  filterKeys: true,
  keyUpDown: true,
  reInt: /^([\-]?[1-9][0-9]*|[\-]?[0-9]?)$/,
  reFloat: /^[\-]?[0-9]*\.?[0-9]*$/,
  onBlur: "validate",
  saveKey: $.ui.keyCode.ENTER,
  allowInvalid: false,
  invalidClass: "ui-state-error",
  validate: true
},
editor: {
  select: false,
  type: "textbox"
},
validation: {
  icon: "ui-icon-alert",
  cls: "ui-state-error"
},
flexHeight: false,
flexWidth: false,
freezeCols: 0,
freezeRows: 0,
calcDataIndxFromColIndx: true,
height: 400,
hoverMode: "null",
_maxColWidth: "100%",
_minColWidth: 50,
minWidth: 100,
numberCell: {
  width: 30,
  title: "",
  resizable: true,
  minWidth: 30,
  maxWidth: 100,
  show: true
},
pageModel: {
  curPage: 1,
  totalPages: 0,
  rPP: 10,
  rPPOptions: [10, 20, 50, 100]
},
resizable: false,
roundCorners: true,
rowBorders: true,
scrollModel: {
  pace: "fast",
  horizontal: true,
  autoFit: false,
  theme: false
},
selectionModel: {
  triggerSelectChange: true,
  type: "cell",
  mode: "block"
},
swipeModel: {
  on: true,
  speed: 50,
  ratio: 0.15,
  repeat: 20
},
showBottom: true,
showHeader: true,
showTitle: true,
showToolbar: true,
showTop: true,
sortable: true,
sql: false,
stripeRows: true,
title: "&nbsp;",
treeModel: null,
virtualX: false,
virtualY: false,
width: "auto",
wrap: true,
hwrap: true

Change Logs:

v2.2.0 (2017-01-24)

  • Added more options, methods and events.
  • Fixed various bugs.

v1.1.3 (2013-07-11)

  • Improved support for JSON: dataIndx can be int or String
  • flexWidth fix for IE10
  • Correction in camelCase cellKeyDown and cellEditKeyDown

v1.1.0 (2013-04-11)

  • internationalization and localization

v1.0.8 (2013-03-28)

  • Method: createTable
  • Events: refresh

This awesome jQuery plugin is developed by paramquery. For more Advanced Usages, please check the demo page or visit the official website.