问题描述
我有以下代码可以双击进行内联
I have the following code to enter inline editing on double click:
ondblClickRow: function (row_id) {
if(row_id != null) {
$('#Products').jqGrid('restoreRow',last_selected_row);
$('#Products').jqGrid('saveRow',row_id);
$("#Products").jqGrid('editRow',row_id, true, null,
function(){ $("#Products").trigger("reloadGrid", [{current: true}]); },
'xtras/Products.php',
null,{},
{},{}
);
$("#Products_ilsave").removeClass('ui-state-disabled');
$("#Products_ilcancel").removeClass('ui-state-disabled');
$("#Products_ilcancel").removeClass('ui-state-disabled');
$("#Products_ilcopy").addClass('ui-state-disabled');
$("#Products_iladd").addClass('ui-state-disabled');
}
}
和导航定义:
$("#Products").jqGrid("navGrid", "#Products_pager",
{search: true, add: false, edit: false, del: true, refreshstate: "current"},
{},
{},
{},
{},
{sopt:['eq','ne','cn','bw','bn','ge','le','lt','gt'], multipleSearch:true, showQuery: false}
)
.jqGrid("inlineNav", "#Products_pager",
{add: true, edit: true},
)
.navButtonAdd('#Products_pager',{
caption:"",
title:"Copy selected row",
id:"Products_ilcopy",
buttonicon:"ui-icon-copy",
onClickButton: function(){
var srcrowid = $grid.jqGrid('getGridParam', 'selrow');
if (srcrowid > 0) {
$('#Products_iladd').click();
var rowData = $('#Products').jqGrid('getRowData', srcrowid);
rowData.ID = '';
rowData.Catalogue = '';
rowData.UPCEAN = '';
rowData.copyID = srcrowid;
$grid.jqGrid('setRowData', 'new_row', rowData);
var ondblClickRowHandler = $('#Products').jqGrid("getGridParam", "ondblClickRow");
ondblClickRowHandler.call($("#Products")[0], 'new_row');
} else {
alert('Please select a row to copy');
return false;
}
},
position:"last"
});
如您所见，当我单击COPY按钮时，将创建一个新行，并调用ondblClickRow进入内联编辑.如果单击navGrid中的SAVE按钮-它会保存但不会重新加载.如果我按Enter键-它会重新加载，但不会保存任何内容.
As you can see when I click on COPY button a new row created and ondblClickRow is called to enter inline editing. If I click on SAVE button in navGrid - it saves but not reloads. If I hit Enter key - it reloads, but doesn't save anything.
请问我如何保存并重新加载网格?
How can I save and reload grid after please?
-------------- UPDATE ---------------------
--------------UPDATE---------------------
添加，编辑，删除，复制-所有相同的URL-'xtras/Products.php'
add, edit, delete, copy - all the same URL - 'xtras/Products.php'
url:'xtras/Products.php',
editurl:'xtras/Products.php',
datatype: "json",
mtype:'GET',
$('#Products')-是页面上唯一的网格
$('#Products') - is the only grid on the page
使用-jqGrid 4.4.2
using - jqGrid 4.4.2
推荐答案
当前代码中的主要问题如下:使用reloadGrid 仅对指定回调>.在另一侧，您使用inlineNav，其中有另外两个调用editRow:一个在单击编辑"按钮上，另一个在单击添加"按钮上.在这种情况下，您将不会重新加载网格.在执行复制所选行"按钮时，还有其他一些问题.因此，我决定重写您使用的代码.生成的代码如下所示
The main problems in your current code is the following: you specify callback with reloadGrid only for one direct call of editRow. On the other side you use inlineNav which have two other calls of editRow: one on click on Edit button and another on click on Add button. You will have no reloading of the grid in the case. There are some other problems in the implementation of "Copy selected row" button. So I decide to rewrite the code which you use. The resulting code could looks like below
var editOptions = {
keys: true,
aftersavefunc: function() {
var $self = $(this);
setTimeout(function () {
$self.trigger("reloadGrid", [{current: true}]);
}, 50);
},
url: "xtras/Products.php"
},
gridIdSelector = "#Products",
pagerIdSelector = "#Products_pager",
$grid = $(gridIdSelector);
$.extend($.jgrid.search, {
sopt: ["eq", "ne", "cn", "bw", "bn", "ge", "le", "lt", "gt"],
multipleSearch: true
});
// create the grid
$grid.jqGrid({
...
pager: pagerIdSelector,
ondblClickRow: function (rowid) {
var $self = $(this),
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0 && savedRows[0].id !== rowid) {
// cancel editing of another row is editing
// don't cancel on double click on the current editing
$self.jqGrid("restoreRow", savedRows[0].id);
}
if (savedRows.length === 0) {
$self.jqGrid("editRow", rowid, editOptions);
}
}
})
.jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
.jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
.jqGrid("navButtonAdd", pagerIdSelector, {
caption: "",
title: "Copy selected row",
id: $grid[0].id + "_ilcopy",
buttonicon: "ui-icon-copy",
onClickButton: function () {
var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
srcrowid = p.selrow, savedRows = p.savedRow;
if (srcrowid !== null) {
if (savedRows.length > 0) {
// cancel editing
$self.jqGrid("restoreRow", savedRows[0].id);
}
rowData = $self.jqGrid("getRowData", srcrowid);
rowData.ID = "";
rowData.Catalogue = "";
rowData.UPCEAN = "";
rowData.copyID = srcrowid;
$self.jqGrid("addRow", {
initdata: rowData,
addRowParams: editOptions
});
} else {
alert("Please select a row to copy");
return false;
}
}
});
// Enable/disable buttons on start/end of editing
$grid.bind("jqGridInlineEditRow jqGridInlineAfterSaveRow jqGridInlineAfterRestoreRow", function () {
var $self = $(this),
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0) {
// some row is editing now
$(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").removeClass("ui-state-disabled");
$(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").addClass("ui-state-disabled");
} else {
// No row is editing now
$(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").addClass("ui-state-disabled");
$(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").removeClass("ui-state-disabled");
}
});
您会看到我定义了一个对象 editOptions，以后将其用作所有情况下editRow的选项.另外，我使用jqGrid的savedRow参数，该参数保存有关当前正在编辑(就内联或单元格编辑而言)行的信息.如果savedRow是空数组，则现在没有行在编辑.如果不为空，则数组项目的id属性包含编辑行的rowid.我在复制所选行"按钮的onClick处理程序中还使用了addRow方法的直接调用.
You can see that I defines one object editOptions which I use later as the options of editRow for all cases. Additionally I use savedRow parameter of jqGrid which hold the information about currently editing (with respect of inline or cell editing) rows. If savedRow is empty array, then no rows are editing now. If it's not empty then the id property of the items of the array contains the rowid of editing row. I use additionally direct call of addRow method inside of onClick handler of "Copy selected row" button.
这篇关于在保存/提交时重新加载jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！