本地测试jqGrid环境

来自http://tunps.com/test-jqgrid

项目很多都地方都需要使用data grid，我参考了N久，还是jqGrid最为强大。当然不一定强大的就是最好的，看你的口味了，我反正是重口味。

这个是 jQuery Grid Plugin的主页。

首先下载jquery.jqGrid-3.6.4.zip，和jQuery UI 类似，可以根据所需模块自定义下载，达到文件的最小化，速度最优化，因为我比较菜，我全部选择，免得出问题。

jquery.jqGrid-3.6.4.zip文件有283kB左右。

是这样一个文件树结构（tree /f命令果然牛逼）：

├─css
│      ellipsis-xbl.xml
│      ui.jqgrid.css
│
├─js
│  │  Changes.txt
│  │  install.txt
│  │  jquery-1.3.2.min.js
│  │  jquery.jqGrid.min.js
│  │
│  └─i18n
│          grid.locale-bg.js
│          grid.locale-bg1251.js
│          grid.locale-cat.js
│          grid.locale-cn.js
│          grid.locale-cs.js
│          grid.locale-de.js
│          grid.locale-dk.js
│          grid.locale-el.js
│          grid.locale-en.js
│          grid.locale-fa.js
│          grid.locale-fi.js
│          grid.locale-fr.js
│          grid.locale-he.js
│          grid.locale-is.js
│          grid.locale-it.js
│          grid.locale-ja.js
│          grid.locale-nl.js
│          grid.locale-no.js
│          grid.locale-pl.js
│          grid.locale-pt-br.js
│          grid.locale-pt.js
│          grid.locale-ro.js
│          grid.locale-ru.js
│          grid.locale-sp.js
│          grid.locale-sv.js
│          grid.locale-tr.js
│          grid.locale-ua.js
│
└─src
    │  grid.base.js
    │  grid.celledit.js
    │  grid.common.js
    │  grid.custom.js
    │  grid.formedit.js
    │  grid.import.js
    │  grid.inlinedit.js
    │  grid.jqueryui.js
    │  grid.loader.js
    │  grid.postext.js
    │  grid.setcolumns.js
    │  grid.subgrid.js
    │  grid.tbltogrid.js
    │  grid.treegrid.js
    │  jqDnR.js
    │  jqModal.js
    │  jquery.fmatter.js
    │  jquery.searchFilter.js
    │  JsonXml.js
    │  ui.multiselect.js
    │
    ├─css
    │      ellipsis-xbl.xml
    │      jquery.searchFilter.cs
    │      ui.jqgrid.css
    │      ui.multiselect.css
    │
    └─i18n
            grid.locale-bg.js
            grid.locale-bg1251.js
            grid.locale-cat.js
            grid.locale-cn.js
            grid.locale-cs.js
            grid.locale-de.js
            grid.locale-dk.js
            grid.locale-el.js
            grid.locale-en.js
            grid.locale-fa.js
            grid.locale-fi.js
            grid.locale-fr.js
            grid.locale-he.js
            grid.locale-is.js
            grid.locale-it.js
            grid.locale-ja.js
            grid.locale-nl.js
            grid.locale-no.js
            grid.locale-pl.js
            grid.locale-pt-br.js
            grid.locale-pt.js
            grid.locale-ro.js
            grid.locale-ru.js
            grid.locale-sp.js
            grid.locale-sv.js
            grid.locale-tr.js
            grid.locale-ua.js

src是给用来研究代码的，就需要js目录和css目录就ok了。

再下载一个jqgrid_demo36.zip。

需要用到demo包里面的example.html、example.php、dbconfig.php、database.sql。

将dbconfig.php里面的数据库信息和自己的本地mysql账户相对应，然后新建一个名为griddemo的数据库。

将database.sql导入griddemo。

接下来到jqueryui.com下载一个主题，版本用1.7.2的，因为jqGrid基于jQuery 1.3.2开发。

将jquery-ui-1.7.2.custom-1.zip的css目录下的文件jquery-ui-1.7.2.custom.css和images目录拷贝到example.html同目录下。

修改example.html，将：

改为：

第一个是jquery ui的css，第二个是jqgrid自带的css。

将：

改为：

一定要在载入jqGrid之前载入locale。

这样jqGrid利用json传数据的例子就弄好了。