我正在尝试为jQgrid启用内联编辑,但我无法使其工作。它必须是真正“虚拟”的东西,但我找不到它。我已将此代码与内联编辑工作且相同的其他网格进行了比较。所以这就是我到目前为止所做的事情(我已经删除了一些部分,完全来自Fiddle - 见下面的链接):
$(function () {
"use strict";
var $grid = $("#form_list"),
maximizeGrid = function () {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
},
mydata = [...];
// Resize grid if window is being resized
$(window).on("resize", maximizeGrid);
$grid.jqGrid({
colNames: ["", "Form Name", "Fax Number", "FileName", "Folder"],
colModel: [
{name: "act", template: "actions", width: 115},
{name: "FormName", search: true, stype: "text"},
{name: "FaxNumber",search: true,stype: "text"},
{name: "FormFileName",search: true,stype: "text"},
{name: "folder",search: true,stype: "text"}],
cmTemplate: {width: 300,autoResizable: true},
iconSet: "fontAwesome",
rowNum: 25,
guiStyle: "bootstrap",
autoResizing: {compact: true,resetWidthOrg: true},
rowList: [25, 50, 100, "10000:All"],
toolbar: [true, "top"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
toppager: true,
cloneToTop: true,
hoverrows: true,
multiselect: true,
multiPageSelection: true,
rownumbers: true,
sortname: "Id",
sortorder: "desc",
loadonce: true,
autowidth: true,
autoresizeOnLoad: true,
forceClientSorting: true,
ignoreCase: true,
prmNames: {id: "Id"},
jsonReader: {id: "Id"},
url: '/echo/json/',
datatype: 'json',
mtype: 'POST',
postData: {json: JSON.stringify(mydata)},
actionsNavOptions: {
uploadFormicon: "fa-upload",
uploadFormtitle: "Upload this form",
cloneFormicon: "fa-clone",
cloneFormtitle: "Clone this form",
archiveFormicon: "fa-archive",
archiveFormtitle: "Archive this form",
custom: [
{action: "uploadForm",position: "first",onClick: function (options) {alert("Upload Form, rowid=" + options.rowid);}},
{
action: "cloneForm",
position: "first",
onClick: function (options) {
$.ajax({
url: '/ajax/forms/clone_by_id',
type: 'POST',
dataType: 'json',
data: {
form_id: options.rowid
}
}).done(function () {
$grid.trigger("reloadGrid", {
fromServer: true
});
toastr["success"]("The form has been cloned.", "Information");
}).error(function (response) {
toastr["error"]("Something went wrong, the form could not be cloned.", "Error");
console.error(response);
});
}},
{action: "archiveForm",position: "first",onClick: function (options) {alert("Archive Form, rowid=" + options.rowid);}
}]
},
formDeleting: {
url: '/ajax/forms/delete',
delicon: [true, "left", "fa-scissors"],
cancelicon: [true, "left", "fa-times"],
width: 320,
caption: 'Delete form',
msg: 'Are you sure you want to delete this form?',
beforeShowForm: function ($form) {
var rowids = $form.find("#DelData>td").data("rowids");
$form.closest(".ui-jqdialog").position({
of: window,
my: "center center",
at: "center center"
});
if (rowids.length > 1) {
$form.find("td.delmsg").html('Are you sure you want to delete all the selected forms?');
}
},
afterComplete: function (response, postdata, formid) {
if (response.responseText === "true") {
alert("Success");
} else {
alert("Error");
}
}
},
navOptions: {
edit: false,
add: false,
search: false
},
inlineEditing: {
keys: true,
focusField: "FormName",
serializeSaveData: function (postData) {
var changedData = {},
prop, p = $(this).jqGrid("getGridParam"),
idname = p.keyName || p.prmNames.id,
oldValue, cm;
for (prop in postData) {
oldValue = p.savedRow[0][prop];
if (p.iColByName[prop] != null) {
cm = p.colModel[p.iColByName[prop]];
}
if (postData.hasOwnProperty(prop) && (postData[prop] !== oldValue || prop === idname)) {
changedData[prop] = postData[prop];
}
}
return changedData;
},
aftersavefunc: function () {
toastr["success"]("The record was updated successfully.", "Information");
},
errorfunc: function () {
toastr["error"]("Something went wrong, the record could not be updated.", "Error");
}
},
onSelectRow: function (rowid, status, e) {
var $self = $(this),
$td = $(e.target).closest("tr.jqgrow>td"),
p = $self.jqGrid("getGridParam"),
savedRow = p.savedRow;
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
if ($td.length > 0 && $td[0].cellIndex !== p.iColByName.act) {
// don't start editing mode on click on "act" column
$self.jqGrid("editRow", rowid);
}
},
loadComplete: function () {
var $self = $(this),
p = $self.jqGrid("getGridParam");
if (p.datatype === "json") {
// recreate the toolbar because we use generateValue: true option in the toolbar
$self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
}
}
}).jqGrid('navGrid').jqGrid("filterToolbar").jqGrid('setFrozenColumns');
});
有什么想法吗?这是Fiddle