MagicGrid is a small and flexible JQuery grid plugin. Although it only provide basic grid function, good design model give it great flexibility.

Basic features:

  1. adjust row width
  2. change row order by drag and drop
  3. load data from local and remote
  4. row definition by youself (Render)
  5. succinct code (size of origin code is under 10k, after compress it is under 3k), update easily.
  6. easy study and use
  7. easy custom css style
Just a little more code, you can implement the following functions:
  1. multiple-row header (at present it provides two-row header)
  2. order by local or server
  3. pagination by local and remote
  4. define the pagination css style by yourself
  5. row summation
  6. row extend
  7. the first row can be locked


Sort data at local or server. default = false.


Height of grid header set. It is important if you want use multi headers. demo


Height of grid footer if you have. demo


A array of columns set.

Items Description Note
field property of record data object optional
title column title, it also can be a JS or JQuery element optional, demo
width column width must be assigned, unit is px
header JS or JQuery element for custom head optional, but it is important for multi headers.demo
sizeable If this column can be resize width optional, default = true
render a function that return a JS or JQuery element to show in cells. optional.demo
  1. r: record object
2. tr: row element
3. gd: grid element



how many page numbers will show in the page bar. optional. but, if you do not assign this value, the page bar will be hidden.

afterLoad(dd, [po])

This event will be trigged since data be loaded to grid.


Sort by current sorter elements or assigned sorter element.


Manually fit the grid to the container of it or just fit to itself.

newRow(r, [k])

Create a new row but do not append it to grid.
Return element(tr) of new row.

Here is an demo.

addRow(r, [k])

Create and append a new row to grid.
Same param with "newRow" method.

loadData(data, [po])

Load data to grid from local memory.


Load data to grid from remote url(option loadUrl).


Freeze first one or seriate more columns from left.

Copyright © 2011. All rights reserved  蜀ICP备11014774号-1   QQ: 7213571  MSN:  E-mail: