您的位置：首页 > Web前端 > JQuery

jqGrid的调用以及常用增删改查的使用方法

2011-11-19 09:57 393 查看
 jquery grid是富客户端的，基于XML ， Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。精心设计的，具有强大的脚本API的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。

 

jquery grid是富客户端的，基于XML ， Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。精心设计的，具有强大的脚本API的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。

1.调用grid

jqGrid已经可以从Server端获得数据，并显示在Grid表格中了。下面说一下，如何操作Grid表格及其数据。

jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：

 

1
$(
"#grid_id"
).jqGridMethod( parameter1,...,parameterN );
或者

 

1
$(
"#grid_id"
).jqGrid(
'method'
,parameter1,...,parameterN );
2.常用的方法函数（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ）
1. getGridParam

这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，例如：

 

1
var

id = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
即可获得当前选中的行的ID。

注：selrow是jqGrid选项之一，默认值是null。这是一个只读选项，代表最后选中行的ID。如果执行翻页或者排序后，此选项将被设为null。关于其他选项，后续会有介绍。

如果不传入name参数，则会返回jqGrid整个选项options。
2. getRowData

这个方法用来获得某行的数据。它具有一个rowid参数，jqGrid会根据这个rowid返回对应行的数据，返回的是name:value类型的数组。例如：

 

1
var

getContact =
function
() {
2
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
3
 
 
4
    
var

rowData = $(
"#gridTable"
).jqGrid(
"getRowData"
,selectedId);
5
 
 
6
    
alert(
"First Name: "

+ rowData.firstName);
7
};
如果rowid未能被找到，则返回一个空数组；如果未设置rowid参数，则以数组的形式返回Grid的所有行数据。

3. addRowData

这个方法用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：

rowid ：新行的id号；

data ：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；

position ：插入的位置（first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；

srcrowid ：新行将插入到srcrowid指定行的前面或后面。

例如：

 

01
var

addContact =
function
() {
02
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
03
 
 
04
    
var
dataRow = {
05
        
id : 99,
06
        
lastName :
"Zhang"
,
07
        
firstName :
"San"
,
08
        
email :
"zhang_san@126.com"
,
09
        
telNo :
"0086-12345678"
10
    
};
11
 
 
12
    
if
(selectedId) {
13
        
$(
"#gridTable"
).jqGrid(
"addRowData"
,99,dataRow,
"before"
,selectedId);
14
 
 
15
    
}
else

{
16
        
$(
"#gridTable"
).jqGrid(
"addRowData"
,99,dataRow,
"first"
);
17
 
 
18
    
}
19
};
这个方法可以一次性插入多行，data参数必须是[{name1:value1,name2: value2…},{name1:value1,name2: value2…}]这样的数组形式，而且rowid参数也应该设为data参数对象中代表id的field名称。不过，此时的rowid不用必须是colModel中的一部分。

例如：

 

01
var

addContact =
function
() {
02
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
03
 
 
04
    
var

dataRow = [{
05
        
id : 99,
06
        
lastName :
"Zhang"
,
07
        
firstName :
"San"
,
08
        
email :
"zhang_san@126.com"
,
09
        
telNo :
"0086-12345678"
10
    
},
11
    
{
12
        
id : 100,
13
        
lastName :
"Li"
,
14
        
firstName :
"Si"
,
15
        
email :
"li_si@126.com"
,
16
        
telNo :
"0086-12345678"
17
    
},
18
    
{
19
        
id : 101,
20
        
lastName :
"Wang"
,
21
        
firstName :
"Wu"
,
22
        
email :
"wang_wu@126.com"
,
23
        
telNo :
"0086-12345678"
24
    
}];
25
 
 
26
    
if
(selectedId) {
27
        
$(
"#gridTable"
).jqGrid(
"addRowData"
,
"id"
,dataRow,
"before"
,selectedId);
28
 
 
29
    
}
else

{
30
        
$(
"#gridTable"
).jqGrid(
"addRowData"
,
"id"
,dataRow,
"first"
);

31
 
 
32
    
}
33
};
注：我测试了一下，一次插入多行的情况下，用于设置插入位置的后两个参数，似乎没有起作用。插入的几行数据都被置于Grid的底端。

4. setRowData

这个方法用于为某行数据设置数据值。执行成功返回true，否则返回false。它具有3个参数：

rowid ：更新数据的行id；

data ：更新的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；这个数据对象，不必设置完全，需要更新哪列，就设置哪列的name:value对；

cssprop ：如果cssprop为String类型，则会使用jQuery的addClass为行增加相应名称的CSS类；如果为object类型，则会使用html的css属性，为行添加样式。如果只想增加css样式而不更新数据，可以将data参数设为false。

5. delRowData

这个方法用于删除某行数据。执行成功返回true，否则返回false。具有一个参数rowid，代表要删除的行id。

6. setGridParam

这个方法与getGridParam对应，用于设置jqGrid的options选项。返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象（name来自jqGrid的options选项名）。某些选项在设置之后需要trigger("reloadGrid")，才能显示出效果。

7. setGridWidth

为Grid动态地设定一个新的宽度。两个参数：

new_width ：以px为单位的新宽度值；

shrink ：作用与jqGrid的shrinkToFit选项相同；如果此参数未设置，则沿用jqGrid的shrinkToFit选项的值。

8. trigger("reloadGrid")

根据当前设置，重新载入Grid表格，即意味着向Server发送一个新的请求。此方法只能用于已经构建好的Grid。此外，此方法不会使对colModel所做出的改变生效。应该使用gridUnload来重新载入对colModel的新设置。

9. 其他方法

除了以上介绍的的方法外，jqGrid还有其他有用的方法，例如：

addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等

以及增强模块提供的方法，例如：

filterGrid、GridDestroy、GridUnload、setColProp等。

这些方法的具体用法，或浅显易懂，或不是非常常用。都可以参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ），得到具体指示。

10. 额外的考虑

在上面介绍的增删改数据行的操作中，jqGrid实际上完成的只是客户端的操作，主要是DOM的更改工作。但是如果传到Server的请求失败了，或者没有得到想要的返回结果，那jqGrid的处理还继续吗？会不会和Server端的数据不同步了呢？

这个问题在下一篇中再讨论吧。

注： 本篇中介绍的方法在jqGrid的Demo中也有介绍，但是我觉得还是自己的实例看起来更直观，更适合自己理解。

附上代码：

javascript部分：

 

01
$(
function
(){

02
    
// 配置jqGrid组件
03
    
$(
"#gridTable"
).jqGrid({
04
        
url:
"jqGrid01.action"
,
05
        
datatype:
"json"
,
06
        
mtype:
"GET"
,
07
        
height: 350,

08
        
width: 600,
09
        
colModel: [
10
              
{name:
"id"
,index:
"id"
,label:
"编码"
,width:40},
11
              
{name:
"lastName"
,index:
"lastName"
,label:
"姓"
,width:80,sortable:
false
},
12
              
{name:
"firstName"
,index:
"firstName"
,label:
"名"
,width:80,sortable:
false
},
13
              
{name:
"email"
,index:
"email"
,label:
"电子邮箱"
,width:160,sortable:
false
},
14
              
{name:
"telNo"
,index:
"telNo"
,label:
"电话"
,width:120,sortable:
false
}
15
        
],
16
        
viewrecords:

true
,
17
        
rowNum: 15,
18
        
rowList: [15,50,100],
19
        
prmNames: {search:

"search"
},
20
        
jsonReader: {

21
            
root:
"gridModel"
,
22
            
records:

"record"
,
23
            
repeatitems :

false
24
        
},
25
        
pager:
"#gridPager"
,
26
        
caption:
"联系人列表"
,
27
        
hidegrid:
false
,
28
        
shrikToFit:
true
29
    
});
30
});
31
var

echoSelRow =
function
() {
32
    
var

id = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
33
 
 
34
    
alert(
"当前选中行ID："

+ id);
35
};
36
var

getContact =
function
() {
37
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
38
 
 
39
    
var

rowData = $(
"#gridTable"
).jqGrid(
"getRowData"
,selectedId);
40
 
 
41
    
alert(
"First Name: "

+ rowData.firstName);
42
};
43
var

addContact =
function
() {
44
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
45
 
 
46
    
var
dataRow = {
47
        
id : 99,
48
        
lastName :
"Zhang"
,
49
        
firstName :
"San"
,
50
        
email :
"zhang_san@126.com"
,
51
        
telNo :
"0086-12345678"
52
    
};
53
 
 
54
    
if
(selectedId) {
55
        
$(
"#gridTable"
).jqGrid(
"addRowData"
,99,dataRow,
"before"
,selectedId);
56
 
 
57
    
}
else

{
58
        
$(
"#gridTable"
).jqGrid(
"addRowData"
,99,dataRow,
"first"
);
59
 
 
60
    
}
61
};
62
var

updateContact =
function
() {
63
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
64
 
 
65
    
var
dataRow = {
66
        
lastName :
"Li"
,
67
        
firstName :
"Si"
,
68
        
email :
"li_si@126.com"
69
    
};
70
 
 
71
    
var

cssprop = {
72
        
color :
"#FF0000"
73
    
};
74
 
 
75
    
$(
"#gridTable"
).jqGrid(
'setRowData'
,selectedId,dataRow,cssprop);
76
};
77
var

deleteContact =
function
() {
78
    
var

selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
79
 
 
80
    
$(
"#gridTable"
).jqGrid(
'delRowData'
,selectedId);
81
};
82
var

changeGridOptions =
function
() {
83
    
$(
"#gridTable"
).jqGrid(
"setGridParam"
,{
84
        
rowNum: 50,
85
        
page: 16
86
    
}).trigger(
'reloadGrid'
);
87
 
 
88
    
$(
"#gridTable"
).jqGrid(
"setCaption"
,
"Contact List"
).trigger(
'reloadGrid'
);
89
 
 
90
    
alert($(
"#gridTable"
).jqGrid(
"getGridParam"
,
"caption"
));
91
    
alert($(
"#gridTable"
).jqGrid(
"getGridParam"
,
"rowNum"
));
92
};
93
var

resetWidth =
function
() {
94
    
$(
"#gridTable"
).jqGrid(
"setGridWidth"
,300,
false
);
 } 
 

html部分： 

01
<!DOCTYPE html
02
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
03
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
04
<html xmlns=
"http://www.w3.org/1999/xhtml"

xml:lang=
"zh-CN"

lang=
"zh-CN"
>
05
    
<head>
06
        
<title>jqGrid02</title>
07
        
<link rel=
"stylesheet"

type=
"text/css"

media=
"screen"
href=
"../css/themes/aero/jquery-ui-1.8.1.custom.css"

mce_href=
"css/themes/aero/jquery-ui-1.8.1.custom.css"

/>
08
        
<link rel=
"stylesheet"

type=
"text/css"

media=
"screen"
href=
"../css/themes/aero/ui.jqgrid.custom.css"

mce_href=
"css/themes/aero/ui.jqgrid.custom.css"

/>
09
 
 
10
        
<mce:script type=
"text/javascript"

src=
"../js/jquery-1.4.2.min.js"

mce_src=
"js/jquery-1.4.2.min.js"
></mce:script>
11
        
<mce:script src=
"../js/jquery-ui-1.8.1.custom.min.js"

mce_src=
"js/jquery-ui-1.8.1.custom.min.js"

type=
"text/javascript"
></mce:script>
12
        
<mce:script src=
"../js/i18n/grid.locale-zh-CN.js"

mce_src=
"js/i18n/grid.locale-zh-CN.js"

type=
"text/javascript"
></mce:script>
13
        
<mce:script src=
"../js/jquery.jqGrid.min.js"

mce_src=
"js/jquery.jqGrid.min.js"

type=
"text/javascript"
></mce:script>
14
 
 
15
        
<mce:script src=
"js/jqGrid02.js"

mce_src=
"js/jqGrid02.js"

type=
"text/javascript"
></mce:script>
16
    
</head>
17
    
<body>
18
        
<h3>
19
            
jqGrid测试 02

20
        
</h3>
21
        
<div>
22
            
<table id=
"gridTable"
></table>
23
            
<div id=
"gridPager"
></div>
24
        
</div>
25
 
 
26
        
<br />
27
 
 
28
        
<div>
29
            
<button onclick=
"echoSelRow()"
>当前行ID</button>
30
            
<button onclick=
"getContact()"
>当前联系人</button>
31
            
<button onclick=
"addContact()"
>添加行</button>
32
            
<button onclick=
"updateContact()"
>修改行</button>
33
            
<button onclick=
"deleteContact()"
>删除行</button>
34
            
<button onclick=
"changeGridOptions()"
>改变Grid选项</button>
35
            
<button onclick=
"resetWidth()"
>改变Grid宽度</button>
36
        
</div>
37
    
</body>
38
</html>
 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  function jquery button email methods server
相关文章推荐
新的分享
章节导航