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

sortLocally

Sort data at local or server. default = false.

• true: sort grid data (current page) via js.
• false: just post request params to loadUrl.

headerHeight

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

footerHeight

Height of grid footer if you have. demo

cols

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

loader

• url: URL, data provider
• params: load params, eg: { pageNo: 1, pageSize: 20 }
• autoLoad: whether auto load data when current page ready. default = true

pagerLength

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.

• dd: direct grid data array.demo
• po: full grid data object with pagenation. demo

sort([el])

Sort by current sorter elements or assigned sorter element.

• el: sorter element, optional, usually not use

adjust([vp])

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

• vp: container(viewPort) of it, optional

newRow(r, [k])

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

• r: data object of this row
• k: manually assigne the key of row. It must be passed when option "key" is not set.

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.

• dd: direct grid data array.demo
• po: full grid data object with pagenation. this param will be passed to afterLoad event.demo

load([pm])

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

• pm: params for load. eg: { name: 'tom' }

lockCols(cs)

Freeze first one or seriate more columns from left.

• cs: name array of columns, eg: ['code','name']

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