将数据从datagrid发布到服务器(JSON) [英] post data from datagrid to server (JSON)
问题描述
我想使用jqgrid/内联编辑，并希望:
I want to make use of jqgrid / inline edit and want to:
- 内联编辑数据
- 完成后，用户单击保存"，并将(更改的)数据行发送到服务器
我已经尝试过，但是没有结果.请在这里查看jsiddle:
I have tried, but no results. Please see jsiddle here:
<script type="text/javascript">
function postAllGridData() {
// TODO : JSON request to server + reload grid
alert('code here');
}
</script>
推荐答案
我将您的代码修改为以下内容: http://jsfiddle.net/OlegKi/2Gc7K/2/.
I modified your code to the following: http://jsfiddle.net/OlegKi/2Gc7K/2/.
在代码中，我将选择的行设置为内联编辑模式，并保存上一个编辑行(如果有的话)
In the code I set selected row in inline editing mode and save previous editing row (if any exist)
onSelectRow: function (rowid) {
if (rowid && rowid !== lastSel) {
$(this).jqGrid("saveRow", lastSel);
lastSel = rowid;
}
$(this).jqGrid("editRow", rowid, true);
}
用户单击将当前网格数据保存到服务器"后，将保存当前编辑行(如果存在)，然后将来自网格的 current 数据保存在变量JSON.stringify将对象序列化为JSON字符串，并显示关于alert的结果:
After the user click on "save current grid data to server" the current editing row (if any exist) will be saved and then current data from the grid will be saved in the variables gridData. After then one can send the data to the server by separate jQuery.ajax call. In the simplest way I serialized the object to JSON string using JSON.stringify and displayed the results with respect of alert:
$("#postAllGridData").click(function () {
var gridData;
$grid.jqGrid("saveRow", lastSel)
gridData = $grid.jqGrid("getGridParam", "data");
alert("data:\n" + JSON.stringify(gridData));
});
我使用了rowNum: 10000.这样就不会使用本地数据分页.即使使用本地分页，代码也将以相同的方式工作.在这种情况下，应仅将rowNum的值指定为行数以下，然后在页面上添加首页传呼器(通过添加toppager: true选项)或在页面上添加空的<div>(如<div id="mypager"></div>)并使用
I used rowNum: 10000. So that no local paging of data are used. The code will work in the same way even if local paging were used. In the case one should just specify the value of rowNum less as the number of rows and add top pager (by adding toppager: true option) or add empty <div> (like <div id="mypager"></div>) to the page and use pager: "#mypager" option.
已更新:可以将上面的代码修改为以下内容
UPDATED: One can modify the above code to the following
$("#postAllGridData").click(function () {
var gridData,
// get ids of edited rows
editedRows = $.map($grid.find(">tbody>tr[editable]"),
function(elem){
return $(elem).attr("id");
});
$grid.jqGrid("saveRow", lastSel);
alert("data:\n" + JSON.stringify(editedRows));
// get data of edited rows
gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row) {
return $.inArray(row.id, editedRows) >= 0;
});
alert("data:\n" + JSON.stringify(gridData));
});
(请参阅 http://jsfiddle.net/OlegKi/2Gc7K/5/) .我使用jQuery.map来获取经过编辑的(甚至未更改)的行的ID，并使用jQuery.grep来过滤data到已编辑的行的数据.
(see http://jsfiddle.net/OlegKi/2Gc7K/5/). I used jQuery.map to get ids of rows which was edited (even non changed) and jQuery.grep to filter data to the rows which was edited.
最常见的代码将是
$("#postAllGridData").click(function () {
var gridData, indexes = $grid.jqGrid("getGridParam", "_index"),
idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
// get ids of edited rows
indexesOfEditedRows = $.map($grid.find(">tbody>tr[editable]"),
function(elem) {
return indexes[$.jgrid.stripPref(idPrefix, $(elem).attr("id"))];
});
// get data of edited rows
gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row, i) {
return $.inArray(i, indexesOfEditedRows) >= 0;
});
alert("data:\n" + JSON.stringify(gridData));
});
(请参见 http://jsfiddle.net/OlegKi/2Gc7K/10/) .因为我们仍然使用editable属性的存在来过滤数据，所以重要的是该方法仅在一页上显示所有行的情况下才起作用.如果进行分页，则必须先将当前页面的ID或已编辑行的索引保存在当前页面上，然后再转到另一页面.在这种情况下，可以使用onPaging回调.结果，我们得到了演示 http://jsfiddle.net/OlegKi/2Gc7K/13/使用以下代码
(see http://jsfiddle.net/OlegKi/2Gc7K/10/). Because we still use existence of editable attribute to filter the data it's important that the method works only in case of displaying all rows on one page. In case of paging one will have to save ids or indexes of edited rows on the current page before go to another page. One can use onPaging callback in the case. As the result we get the demo http://jsfiddle.net/OlegKi/2Gc7K/13/ with the following code
var lastSel, indexesOfOldEditedRows = [], $grid = $("#list4");
$grid.jqGrid({
...
onPaging: function () {
var $self = $(this),
indexes = $grid.jqGrid("getGridParam", "_index"),
idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
indexesOfEditedRows;
$self.jqGrid("saveRow", lastSel);
indexesOfEditedRows = $.map($self.find(">tbody>tr[editable]"),
function(elem) {
return indexes[$.jgrid.stripPref(idPrefix,
$(elem).attr("id"))];
});
$.merge(indexesOfOldEditedRows, indexesOfEditedRows);
}
});
$("#postAllGridData").click(function () {
var gridData, indexes = $grid.jqGrid("getGridParam", "_index"),
idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
indexesOfEditedRows;
// get ids of edited rows
$grid.jqGrid("saveRow", lastSel);
indexesOfEditedRows = $.map($grid.find(">tbody>tr[editable]"),
function(elem) {
return indexes[$.jgrid.stripPref(idPrefix, $(elem).attr("id"))];
});
$.merge(indexesOfOldEditedRows, indexesOfEditedRows);
// get data of edited rows
gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row, i) {
return $.inArray(i, indexesOfOldEditedRows) >= 0;
});
alert("data:\n" + JSON.stringify(gridData));
});
这篇关于将数据从datagrid发布到服务器(JSON)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
