最近使用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的方法
方法大概参数如下
属性名 | 类型 | 默认值 | 是否必需 | 备注 |
---|---|---|---|---|
height | 数字 | 150 | 当值为100%时会随数据的数量而自动调整高度 | |
page | 数字 | 1 | 当前页数 | |
rowNum | 数字 | 20 | 每页行数 | |
records | 数字 | 0 | ||
pager | 字符串或对象 | 否 | 工具条所显示的容器 | |
pgbuttons | 布尔值 | true | 否 | 是否显示上一页下一页的按钮 |
pginput | 布尔值 | true | 否 | 是否显示录入跳转页数的文本框 |
colModel | 数组 | [] | 是 | 定义数据列 |
rowList | 数组 | [] | 否 | 每页行数下拉选项 未设置为不显示该下拉选项 |
colNames | 数组 | [] | 是 | 显示的列名 ,需要和colModel的列数匹配 |
sortorder | 字符串 | "asc" | 否 | 排序字段的排序类型为asc和desc |
sortname | 字符串 | "" | 要排序列名 | |
datatype | 字符串 | "xml" | 否 | 数据传递的类型一般有xml和json |
mtype | 字符串 | "GET" | 否 | 请求的类型一般有GET和POST |
altRows | 布尔值 | false | 否 | 设置表格是否显示斑马条纹 |
selarrrow | 数组 | [] | 否 | |
savedRow | 数组 | [] | 否 | |
shrinkToFit | 布尔值 | true | 否 | |
xmlReader | 对象 | {} | 否 | |
jsonReader | 对象 | {} | 否 | |
subGrid | 布尔值 | false | 否 | |
subGridModel | 数组 | [] | ||
reccount | 数字 | 0 | ||
lastpage | 数字 | 0 | ||
lastsort | 数字 | 0 | ||
selrow | 方法 | null | ||
beforeSelectRow | 方法 | null | ||
onSelectRow | 方法 | null | 当选择一行时引发的事件 | |
onSortCol | 方法 | null | ||
ondblClickRow | 方法 | null | 当双击一行时引发的事件 | |
onRightClickRow | 方法 | null | ||
onPaging | 方法 | null | ||
onSelectAll | 方法 | null | ||
loadComplete | 方法 | null | ||
gridComplete | 方法 | null | ||
loadError | 方法 | null | ||
loadBeforeSend | 方法 | null | ||
afterInsertRow | 方法 | null | ||
beforeRequest | 方法 | null | ||
onHeaderClick | 方法 | null | ||
viewrecords | 布尔值 | false | ||
loadonce | 布尔值 | false | ||
multiselect | 布尔值 | false | ||
multikey | 布尔值 | false | ||
editurl | 字符串 | null | 添加编辑删除操作时数据提交的页面 | |
search | 布尔值 | false | 否 | 是否显示搜索按钮 |
caption | 字符串 | "" | 否 | 表格上方的标题,不写为不显示 |
hidegrid | 布尔值 | true | ||
hiddengrid | 布尔值 | false | ||
postData | 对象 | {} | ||
userData | 对象 | {} | ||
treeGrid | 布尔值 | false | 否 | 是否为树型GRID |
treeGridModel | 字符串 | 'nested' | 否 | 树型GRID的数据源格式一般分为nested和adjacency |
treeReader | 对象 | {} | ||
treeANode | 数字 | -1 | ||
ExpandColumn | 字符串 | null | 否 | 为树型GRID时 按钮所在的列 (在定义treeGrid情况下,指明那一列用来伸展树) |
tree_root_level | 数字 | 0 | 否 | |
prmNames | 对象 | {page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search", nd:"nd"} | 否 | 数据请求时的request的参数设定 |
forceFit | 布尔值 | false | ||
gridstate | 字符串 | "visible" | ||
cellEdit | 布尔值 | false | 设置表格单元是否可以编辑 | |
cellsubmit | 字符串 | "remote" | ||
nv | 0 | |||
loadui | 字符串 | "enable" | ||
toolbar | 数组 | [false,""] | ||
scroll | 布尔值 | false | ||
multiboxonly | 布尔值 | false | ||
deselectAfterSort | 布尔值 | true | ||
scrollrows | 布尔值 | false | ||
autowidth | 布尔值 | false | 否 | 是否自动宽度 |
scrollOffset | 数字 | 18 | ||
cellLayout | 数字 | 5 | ||
subGridWidth | 数字 | 20 | ||
multiselectWidth | 数字 | 20 | ||
gridview | 布尔值 | false | 在工具条上是否显示总条数等信息 | |
rownumWidth | 数字 | 25 | ||
rownumbers | 布尔值 | false | ||
pagerpos | 字符串 | 'center' | ||
recordpos | 字符串 | 'right' | ||
footerrow | 布尔值 | false | ||
userDataOnFooter | 布尔值 | false | ||
hoverrows | 布尔值 | true | ||
altclass | 字符串 | 'ui-priority-secondary' | ||
viewsortcols | 数组 | [false,'vertical',true] | ||
resizeclass | 字符串 | '' | ||
autoencode | 布尔值 | false | ||
remapColumns | 数组 | [] | ||
ajaxGridOptions | 对象 | {} | ||
direction | 字符串 | "ltr" |
先写到这里。未完。