jqGrid入门 中文文档 参数方法讲解(自我备用)
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的方法
方法大概参数如下
先写到这里。未完。