jqGrid的调用以及常用增删改查的使用方法
来源:互联网 发布:厦门seo公司 编辑:程序博客网 时间:2024/06/11 14:17
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>
- jqGrid的调用以及常用增删改查的使用方法
- jqgrid的增删改查
- MySql的增删改查以及常用的一些操作
- jqgrid增删改查
- Jqgrid 增删改查
- jqgrid+struts2+jdbc实现的增删改查
- jqGrid(struts2+jdbc+jsp)增删改查的例子
- Jqgrid+Struts2实现的增删改查(一)
- Jqgrid+Spring实现的增删改查(一)
- Jqgrid+Spring实现的增删改查(一)
- GridView中常用的增删改查
- sqlite常用的命令-增删改查
- 常用的oracle增删改查语句
- 常用的增删改查函数
- mysql的增删改查常用语法
- sqlite常用的命令-增删改查
- oracle常用的增删改查
- mongodb的使用方法,增删改查功能的实现
- 归一化之readline学习
- 动态链接库DLL,静态链接库lib,导入库lib
- 从txt读取数据到Cvmat
- 从一个txt文件中读取矩阵
- session和cookie的区别详解
- jqGrid的调用以及常用增删改查的使用方法
- java-------希尔排序
- ACM类型题解题报告
- 板卡网口不通
- java如何跳出多层循环
- Hibernate核心接口
- DP激情奉献(二)hdu1864
- ubuntu 10.04 32bit JDK 1.5 安装
- 【Transact-SQL】通过递归来实现:将多条记录的某个字段的值,用斜杠拼接在一起