jqgrid demo java_jQuery学习之：jqGrid表格插件——第一个Demo

忘是亡心i 2022-11-02 13:16 128阅读 0赞

![79b4047e782b7830d30e7a3b2ac187e1.png][]

列出关键代码：

html代码:

...

因为jqGrid3.6集成了jQuery UI，所以，此处需要导入UI相关js和css。另外，grid.locale-zh\_CN.js这个国际化文件是自己翻译的，因为官方网站没有中文的国际化文件(官方提供了很多中语言的国际化文件，但是没有提供中文的，什么意思嘛！)。另外，这个文件必须在jquery.jqGrid.min.js之前导入，否则会出问题。

javascript代码：

$(function()

$("\#gridTable").jqGrid(\{

datatype: "local",

height: 250,

colNames:\['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'\],

colModel:\[

\{name:'id',index:'id', width:60, sorttype:"int"\},

\{name:'userName',index:'userName', width:90\},

\{name:'gender',index:'gender', width:90\},

\{name:'email',index:'email', width:125,sorttype:"string"\},

\{name:'QQ',index:'QQ', width:100\},

\{name:'mobilePhone',index:'mobilePhone', width:120\},

\{name:'birthday',index:'birthday', width:100, sorttype:"date"\}

\],

sortname:'id',

sortorder:'asc',

viewrecords:true,

rowNum:10,

rowList:\[10,20,30\],

pager:"\#gridPager",

caption: "第一个jqGrid例子"

\}).navGrid('\#pager2',\{edit:false,add:false,del:false\});

var mydata = \[

\{id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"\},

\{id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"\},

\{id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"\},

\{id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"\},

\{id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"\},

\{id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"\},

\{id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"\},

\{id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"\},

\{id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"\}

\];

for(var i=0;i<=mydata.length;i++)

jQuery("\#gridTable").jqGrid('addRowData',i+1,mydata\[i\]);

\});

可以看出，jqGrid的使用是：$("\#tableId").jqGrid(optional);其中，optional是一个对象，有很多属性，具体什么含义，怎么配置，之后的文章我会介绍，也可以在官方网站找到详细的介绍。

jsp/Servlet集成jqGrid、Struts2集成jqGrid请关注本人之后的博客文章。

![1474ead87132ee9ec7060d4ec12a444d.png][]

大小: 52 KB

下载次数: 477

顶

踩

分享到：

![18e900b8666ce6f233d25ec02f95ee59.png][]

![72dd548719f0ace4d5f9bca64e1d7715.png][]

2009-12-28 12:48

4 楼

polaris1119

2010-11-29

littleJava 写道

51cto上的blog没有附近下载，在javaeye上找到了，多谢楼主了。

![38687d1a1ad71d37c86f287056834d1a.gif][]

客气……

3 楼

littleJava

2010-11-29

51cto上的blog没有附近下载，在javaeye上找到了，多谢楼主了。

![38687d1a1ad71d37c86f287056834d1a.gif][]

2 楼

polaris1119

2009-12-30

把代码发给我瞧瞧。可以发到我邮箱或者就贴在这里。稍微说明下。我看看能不能解决。

1 楼

blackwear

2009-12-30

我这里总有个脚本错误.提示例外被抛出且未被接住..不知道什么意思...

[79b4047e782b7830d30e7a3b2ac187e1.png]: /images/20221024/229df08b08464008bf8b9eabf429eed1.png
[1474ead87132ee9ec7060d4ec12a444d.png]: /images/20221024/982114b26c604b78a382a4dcb6fbfd3f.png
[18e900b8666ce6f233d25ec02f95ee59.png]: /images/20221024/59d8532f69fe4d6e84de79250da86b56.png
[72dd548719f0ace4d5f9bca64e1d7715.png]: /images/20221024/e9b8b2039d3e4c08a280c75fb88a6681.png
[38687d1a1ad71d37c86f287056834d1a.gif]: /images/20221024/db3e61efdced491d9dfa7ef791090447.png