jqGrid与Struts2的结合应用(二) —— 操作Grid数据
2014-12-18 22:34
525 查看
原文地址:http://blog.csdn.net/gengv/article/details/5716347
如不能转载,请联系博主,我马上删除。
上一篇中,jqGrid已经可以从Server端获得数据,并显示在Grid表格中了。下面说一下,如何操作Grid表格及其数据。
jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式:
$("#grid_id").jqGridMethod( parameter1,...,parameterN );
或者
$("#grid_id").jqGrid('method', parameter1,...,parameterN );
首先介绍一下jqGrid的几个最常用的方法函数,具体的方法API也可以参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods )
1. getGridParam
这个方法用来获得jqGrid的选项值。它具有一个可选参数name,name即代表着jqGrid的选项名,例如:
[javascript]
view plaincopyprint?
var id = $("#gridTable").jqGrid("getGridParam", "selrow");
如果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指定行的前面或后面。
例如:
[javascript]
view plaincopyprint?
var addContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
id : 99,
lastName : "Zhang",
firstName : "San",
email : "zhang_san@126.com",
telNo : "0086-12345678"
};
if (selectedId) {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
}
};
注:我测试了一下,一次插入多行的情况下,用于设置插入位置的后两个参数,似乎没有起作用。插入的几行数据都被置于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。
例如:
[javascript]
view plaincopyprint?
var updateContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
lastName : "Li",
firstName : "Si",
email : "li_si@126.com"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};
6. setGridParam
这个方法与getGridParam对应,用于设置jqGrid的options选项。返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象(name来自jqGrid的options选项名)。某些选项在设置之后需要trigger("reloadGrid"),才能显示出效果。
例如:
[javascript]
view plaincopyprint?
var changeGridOptions = function() {
$("#gridTable").jqGrid("setGridParam", {
rowNum: 50,
page: 16
}).trigger('reloadGrid');
};
html部分:
[xhtml]
view plaincopyprint?
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>jqGrid02</title>
<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" />
<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" />
<mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
<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>
<mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
<mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
<mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>
</head>
<body>
<h3>
jqGrid测试 02
</h3>
<div>
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
<br />
<div>
<button onclick="echoSelRow()">当前行ID</button>
<button onclick="getContact()">当前联系人</button>
<button onclick="addContact()">添加行</button>
<button onclick="updateContact()">修改行</button>
<button onclick="deleteContact()">删除行</button>
<button onclick="changeGridOptions()">改变Grid选项</button>
<button onclick="resetWidth()">改变Grid宽度</button>
</div>
</body>
</html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>jqGrid02</title>
<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" />
<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" />
<mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
<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>
<mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
<mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
<mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>
</head>
<body>
<h3>
jqGrid测试 02
</h3>
<div>
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
<br />
<div>
<button onclick="echoSelRow()">当前行ID</button>
<button onclick="getContact()">当前联系人</button>
<button onclick="addContact()">添加行</button>
<button onclick="updateContact()">修改行</button>
<button onclick="deleteContact()">删除行</button>
<button onclick="changeGridOptions()">改变Grid选项</button>
<button onclick="resetWidth()">改变Grid宽度</button>
</div>
</body>
</html>
如不能转载,请联系博主,我马上删除。
上一篇中,jqGrid已经可以从Server端获得数据,并显示在Grid表格中了。下面说一下,如何操作Grid表格及其数据。
jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式:
$("#grid_id").jqGridMethod( parameter1,...,parameterN );
或者
$("#grid_id").jqGrid('method', parameter1,...,parameterN );
首先介绍一下jqGrid的几个最常用的方法函数,具体的方法API也可以参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods )
1. getGridParam
这个方法用来获得jqGrid的选项值。它具有一个可选参数name,name即代表着jqGrid的选项名,例如:
[javascript]
view plaincopyprint?
var id = $("#gridTable").jqGrid("getGridParam", "selrow");
[javascript] view plaincopyprint? var getContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var rowData = $("#gridTable").jqGrid("getRowData", selectedId); alert("First Name: " + rowData.firstName); }; var getContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var rowData = $("#gridTable").jqGrid("getRowData", selectedId); alert("First Name: " + rowData.firstName); };
如果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指定行的前面或后面。
例如:
[javascript]
view plaincopyprint?
var addContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
id : 99,
lastName : "Zhang",
firstName : "San",
email : "zhang_san@126.com",
telNo : "0086-12345678"
};
if (selectedId) {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
}
};
[javascript] view plaincopyprint? var addContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var dataRow = [{ id : 99, lastName : "Zhang", firstName : "San", email : "zhang_san@126.com", telNo : "0086-12345678" }, { id : 100, lastName : "Li", firstName : "Si", email : "li_si@126.com", telNo : "0086-12345678" }, { id : 101, lastName : "Wang", firstName : "Wu", email : "wang_wu@126.com", telNo : "0086-12345678" }]; if (selectedId) { $("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId); } else { $("#gridTable").jqGrid("addRowData", "id", dataRow, "first"); } }; var addContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var dataRow = [{ id : 99, lastName : "Zhang", firstName : "San", email : "zhang_san@126.com", telNo : "0086-12345678" }, { id : 100, lastName : "Li", firstName : "Si", email : "li_si@126.com", telNo : "0086-12345678" }, { id : 101, lastName : "Wang", firstName : "Wu", email : "wang_wu@126.com", telNo : "0086-12345678" }]; if (selectedId) { $("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId); } else { $("#gridTable").jqGrid("addRowData", "id", dataRow, "first"); } };
注:我测试了一下,一次插入多行的情况下,用于设置插入位置的后两个参数,似乎没有起作用。插入的几行数据都被置于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。
例如:
[javascript]
view plaincopyprint?
var updateContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
lastName : "Li",
firstName : "Si",
email : "li_si@126.com"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};
[javascript] view plaincopyprint? var deleteContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); $("#gridTable").jqGrid('delRowData', selectedId); }; var deleteContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); $("#gridTable").jqGrid('delRowData', selectedId); };
6. setGridParam
这个方法与getGridParam对应,用于设置jqGrid的options选项。返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象(name来自jqGrid的options选项名)。某些选项在设置之后需要trigger("reloadGrid"),才能显示出效果。
例如:
[javascript]
view plaincopyprint?
var changeGridOptions = function() {
$("#gridTable").jqGrid("setGridParam", {
rowNum: 50,
page: 16
}).trigger('reloadGrid');
};
[javascript] view plaincopyprint? $(function(){ // 配置jqGrid组件 $("#gridTable").jqGrid({ url: "jqGrid01.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40}, {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true }); }); var echoSelRow = function() { var id = $("#gridTable").jqGrid("getGridParam", "selrow"); alert("当前选中行ID:" + id); }; var getContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var rowData = $("#gridTable").jqGrid("getRowData", selectedId); alert("First Name: " + rowData.firstName); }; var addContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var dataRow = { id : 99, lastName : "Zhang", firstName : "San", email : "zhang_san@126.com", telNo : "0086-12345678" }; if (selectedId) { $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId); } else { $("#gridTable").jqGrid("addRowData", 99, dataRow, "first"); } }; var updateContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var dataRow = { lastName : "Li", firstName : "Si", email : "li_si@126.com" }; var cssprop = { color : "#FF0000" }; $("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop); }; var deleteContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); $("#gridTable").jqGrid('delRowData', selectedId); }; var changeGridOptions = function() { $("#gridTable").jqGrid("setGridParam", { rowNum: 50, page: 16 }).trigger('reloadGrid'); $("#gridTable").jqGrid("setCaption", "Contact List").trigger('reloadGrid'); alert($("#gridTable").jqGrid("getGridParam", "caption")); alert($("#gridTable").jqGrid("getGridParam", "rowNum")); }; var resetWidth = function() { $("#gridTable").jqGrid("setGridWidth", 300, false); }; $(function(){ // 配置jqGrid组件 $("#gridTable").jqGrid({ url: "jqGrid01.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40}, {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true }); }); var echoSelRow = function() { var id = $("#gridTable").jqGrid("getGridParam", "selrow"); alert("当前选中行ID:" + id); }; var getContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var rowData = $("#gridTable").jqGrid("getRowData", selectedId); alert("First Name: " + rowData.firstName); }; var addContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var dataRow = { id : 99, lastName : "Zhang", firstName : "San", email : "zhang_san@126.com", telNo : "0086-12345678" }; if (selectedId) { $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId); } else { $("#gridTable").jqGrid("addRowData", 99, dataRow, "first"); } }; var updateContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); var dataRow = { lastName : "Li", firstName : "Si", email : "li_si@126.com" }; var cssprop = { color : "#FF0000" }; $("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop); }; var deleteContact = function() { var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); $("#gridTable").jqGrid('delRowData', selectedId); }; var changeGridOptions = function() { $("#gridTable").jqGrid("setGridParam", { rowNum: 50, page: 16 }).trigger('reloadGrid'); $("#gridTable").jqGrid("setCaption", "Contact List").trigger('reloadGrid'); alert($("#gridTable").jqGrid("getGridParam", "caption")); alert($("#gridTable").jqGrid("getGridParam", "rowNum")); }; var resetWidth = function() { $("#gridTable").jqGrid("setGridWidth", 300, false); };
html部分:
[xhtml]
view plaincopyprint?
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>jqGrid02</title>
<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" />
<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" />
<mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
<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>
<mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
<mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
<mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>
</head>
<body>
<h3>
jqGrid测试 02
</h3>
<div>
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
<br />
<div>
<button onclick="echoSelRow()">当前行ID</button>
<button onclick="getContact()">当前联系人</button>
<button onclick="addContact()">添加行</button>
<button onclick="updateContact()">修改行</button>
<button onclick="deleteContact()">删除行</button>
<button onclick="changeGridOptions()">改变Grid选项</button>
<button onclick="resetWidth()">改变Grid宽度</button>
</div>
</body>
</html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>jqGrid02</title>
<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" />
<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" />
<mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
<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>
<mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
<mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
<mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>
</head>
<body>
<h3>
jqGrid测试 02
</h3>
<div>
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
<br />
<div>
<button onclick="echoSelRow()">当前行ID</button>
<button onclick="getContact()">当前联系人</button>
<button onclick="addContact()">添加行</button>
<button onclick="updateContact()">修改行</button>
<button onclick="deleteContact()">删除行</button>
<button onclick="changeGridOptions()">改变Grid选项</button>
<button onclick="resetWidth()">改变Grid宽度</button>
</div>
</body>
</html>
相关文章推荐
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(二) ------ 操作Grid数据 .
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(二) —— 操作Grid数据
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- jqGrid与Struts2的结合应用(三) ------ 使用自定义表单对话框编辑Grid数据 .
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- DhtmlxGrid组件应用---结合Ajax实现对表格数据的无刷新操作
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询
- jqGrid与Struts2的结合应用(五) —— 结合Action类进行数据查询