JqGrid中文文档
最近使用JQGrid 发现其中文资料非常的少。几乎没有，而英文资料大部份是PHP。所以写一些资料方便自己和大家以后的使用。
先来看一个我在官方网站复制的简单的例子。
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
2: 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head id="Head1" runat="server">
6: <title>无标题页</title>
7: <link href="JS/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
8: <link href="JS/ui.jqgrid.css" rel="stylesheet" type="text/css" />
9: 10: <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
11: 12: <script src="JS/grid.locale-cn.js" type="text/javascript"></script>
13: 14: <script src="JS/jquery.jqGrid.min.js" type="text/javascript"></script>
15: 16: <script type="text/javascript">
17: $(document).ready(function(){
18: 19: jQuery("#setcols").jqGrid({
20: url:'Default2.aspx',
21: datatype: "json",
22: colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
23: colModel:[24: {name:'id',index:'id', width:55,hidedlg:true},
25: {name:'invdate',index:'invdate', width:90,editable:true},
26: {name:'name',index:'name asc, invdate', width:100},
27: {name:'amount',index:'amount', width:80, align:"right",editable:true,editrules:{number:true}},
28: 29: {name:'tax',index:'tax', width:80, align:"right",editable:true,editrules:{number:true}},
30: {name:'total',index:'total', width:80,align:"right"},
31: {name:'note',index:'note', width:150, sortable:false}
32: ], 33: rowNum:10,34: pager: '#psetcols',
35: sortname: 'id',
36: sortorder: "desc"
37: }); 38: 39: }) 40: 41: 42: </script>
43: 44: </head>
45: <body>
46: <table id="setcols">
47: </table>
48: <div id="psetcols">
49: </div>
50: </body>
51: </html>
我们需要引用的文件分别为
| 1 | JQUERYUI 的CSS样式文件 | jquery-ui-1.7.2.custom.css |
| 2 | JqGrid插件的样式文件 | ui.jqgrid.css |
| 3 | JQUERY 1.3.2的JS文件 | jquery-1.3.2.min.js |
| 4 | JqGrid插件的中文配置文件 | grid.locale-cn.js |
| 5 | 最后是JqGrid本身的JS压缩文件 | jquery.jqGrid.min.js |
Default2.aspx的功能是返回JSON数据
数据如下
{ "page": "1", "total": 2, "records": "13", "rows": [ { "id": "13", "cell": [ "13", "2007-10-06", "Client 3", "1000.00", "0.00", "1000.00", null ] }, { "id": "12", "cell": [ "12", "2007-10-06", "Client 2", "700.00", "140.00", "840.00", null ] }, { "id": "11", "cell": [ "11", "2007-10-06", "Client 1", "600.00", "120.00", "720.00", null ] }, { "id": "10", "cell": [ "10", "2007-10-06", "Client 2", "100.00", "20.00", "120.00", null ] }, { "id": "9", "cell": [ "9", "2007-10-06", "Client 1", "200.00", "40.00", "240.00", null ] }, { "id": "8", "cell": [ "8", "2007-10-06", "Client 3", "200.00", "0.00", "200.00", null ] }, { "id": "7", "cell": [ "7", "2007-10-05", "Client 2", "120.00", "12.00", "134.00", null ] }, { "id": "6", "cell": [ "6", "2007-10-05", "Client 1", "50.00", "10.00", "60.00", null ] }, { "id": "5", "cell": [ "5", "2007-10-05", "Client 3", "100.00", "0.00", "100.00", "no tax" ] }, { "id": "4", "cell": [ "4", "2007-10-04", "Client 3", "150.00", "0.00", "150.00", "no tax" ] } ], "userdata": { "amount": 3220, "tax": 342, "total": 3564, "name": "Totals:" } }代码中table ID 为setcols的是用于显示数据、
代码中div ID 为psetcols的是用于显示数据下方的按钮，分页，搜索等按钮
JavaScript代码中jqGrid()方法是用于初始化JqGrid的方法
方法大概参数如下
先写到这里。未完。
