jQuery jqGrid“addRowData”到“first”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4278321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid "addRowData" to "first" does not work
提问by sami
I cannot add a row to the top of a jqGrid table using the line:
我无法使用以下行在 jqGrid 表的顶部添加一行：
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
在我的表中，先前添加的行的索引从 0 到 N
I am using jqGrid v3.8.1 and jQuery 1.4.3
我正在使用 jqGrid v3.8.1 和 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 src="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>
回答by Oleg
It's a pity that you don't post the full JavaScript code which you use. So I can only guess what happens.
很遗憾您没有发布您使用的完整 JavaScript 代码。所以我只能猜测会发生什么。
For example, if you define myDataas an array ([...]) instead of an object ({...}) the position parameter will be overwritten with the value "last".
例如，如果您定义myData为数组 ( [...]) 而不是对象 ( {...})，则位置参数将被值“last”覆盖。
jqGrid is an open source project and you can examine what exactly do the addRowDatafunction here. You can exactly see in which situation the position parameter "last" will be used.
jqGrid 是一个开源项目，您可以在此处查看该addRowData功能的具体用途。您可以准确地看到在哪种情况下将使用位置参数“last”。
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.
如果您使用可用于重现您描述的问题的代码附加您的问题，则其他人可以验证代码并在 jqGrid 中找到错误或在代码中找到错误。在这两种情况下，您都有很好的机会成为赢家。
UPDATEDThe code which you posted have some small problems.
更新您发布的代码有一些小问题。
First you should remove comma before ']' in the colModeldefinition.
Second the newDatais 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.
首先，您应该在colModel定义中删除 ']' 之前的逗号。
其次newData是一个数组，因此最后一个参数将从“第一个”替换为“最后一个”。
其他一些小但重要的问题是：您必须<!DOCTYPE html ...>在 HTML 代码的开头使用，将 JavaScript 代码放在//<![CDATA[... 中，//]]>然后插入<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />HTML 标题中。
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 Validatorthe last version of HTML code is correct.
也看到它住在这里。如何使用W3 Validator 验证最新版本的 HTML 代码是否正确。
Nevertheless the usage of an additional hidden column which will be used for the sorting is the recommended way.
尽管如此，推荐使用将用于排序的附加隐藏列。
回答by sami
The problem was that the grid was being reloaded and sorted after the addRowDatacall and it would sort the grid as per its sorting order - so do not call reloadGridafter calling addRowData- though the id of the news added table rows are "undefined"...
问题是网格在addRowData调用后被重新加载和排序，它会根据它的排序顺序对网格进行排序 - 所以不要在调用addRowData后调用reloadGrid- 尽管新闻添加的表行的 id 是“未定义”。 ..
