jqGrid "addRowData" to "first" does not work
I cannot add a row to the top of a jqGrid table using the line:
jQuery("#myTable").jqGrid('addRowData', 0, myData, "first");
It just adds to the bottom of the list as usual
Has anyone tried this and works for them?
In my table, previously added rows have index that goes from 0 to N
I am using jqGrid v3.8.1 and jQuery 1.4.3
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script s开发者_开发问答rc="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
jQuery("#myTable").jqGrid({
datatype: "local",
colNames: ['Data ID', 'Device'],
colModel: [{
name: 'DATA_ID',
index: 'DATA_ID',
sorttype: "int",
width: 22,
align: "center",
sortable: false
},
{
name: 'DATA_DN',
index: 'DATA_DN',
width: 60,
align: "center",
sortable: false
},
],
width: "1216",
});
var myData = [{
"DATA_ID": "9",
"DATA_DN": "sony"
}, {
"DATA_ID": "10",
"DATA_DN": "panasonic"
}];
var newData = [{
"DATA_ID": "0",
"DATA_DN": "national"
}, {
"DATA_ID": "1",
"DATA_DN": "samsung"
}];
for (var i = 0; i < myData.length; i++) {
jQuery("#myTable").jqGrid('addRowData', i, myData[i]);
}
jQuery("#myTable").addRowData(0, newData, "first");
//jQuery("#myTable").trigger("reloadGrid");
});
</script>
</head>
<body>
<table id="myTable"></table>
<div id="myTable_pager"></div>
</body>
</html>
It's a pity that you don't post the full JavaScript code which you use. So I can only guess what happens.
For example, if you define myData as an array ([...]) instead of an object ({...}) the position parameter will be overwritten with the value "last".
jqGrid is an open source project and you can examine what exactly do the addRowData function here. You can exactly see in which situation the position parameter "last" will be used.
If you append your question with the code which can be used to reproduce the problem which you describes other could verify the code and either find a bug in the jqGrid or find a bug in your code. In both situation you have good chance to will be a winner.
UPDATED The code which you posted have some small problems.
First you should remove comma before ']' in the colModel definition.
Second the newData is an array so the last parameter will be replaced from "first" to "last".
Some other small but important problems are: you have to use <!DOCTYPE html ...> at the beginning of your HTML code, place the JavaScript code inside of //<![CDATA[ ... //]]> and insert <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> in the HTML header.
The fixed code will be following
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstration how programatically select grid row which are not on the first page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
var grid = jQuery("#myTable");
grid.jqGrid({
datatype: "local",
colNames:['Data ID','Device'],
colModel:[
{name:'DATA_ID',index:'DATA_ID', sorttype:"int", width:22, align:"center", sortable:false},
{name:'DATA_DN',index:'DATA_DN', width:60, align:"center", sortable:false},
],
width: "1216"
});
var myData = [{"DATA_ID":"9", "DATA_DN": "sony"}, {"DATA_ID":"10", "DATA_DN": "panasonic"}];
var newData = [{"DATA_ID":"0", "DATA_DN": "national"}, {"DATA_ID":"1", "DATA_DN": "samsung"}];
for(var i=0;i<myData.length;i++) {
grid.jqGrid('addRowData', i, myData[i]);
}
for (i=0;i<newData.length;i++) {
grid.jqGrid('addRowData', myData.length+i, newData[newData.length-i-1], "first");
}
//grid.trigger("reloadGrid");
});
//]]>
</script>
</head>
<body>
<table id="myTable"><tr><td/></tr></table>
</body>
</html>
see also it live here. How you can verify with W3 Validator the last version of HTML code is correct.
Nevertheless the usage of an additional hidden column which will be used for the sorting is the recommended way.
The problem was that the grid was being reloaded and sorted after the addRowData call and it would sort the grid as per its sorting order - so do not call reloadGrid after calling addRowData - though the id of the news added table rows are "undefined"...
加载中,请稍侯......
精彩评论