我在 JQGrid 上取得了一些成功，但现在我需要加载数据一次，然后在客户端执行所有的 crud 操作，而且听起来很简单，我完全被卡住了。我已经经历了堆栈溢出和谷歌，似乎找不到任何简单的客户端 jqgrid 操作的好例子（我可能是错的，但我也无法在官方的 jqgrid 文档中找到任何客户端的东西）。我试图在这里使用这个例子：
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
但我仍然是 ajax/javaxcript/jquery 的新手，它有点压倒性，我无法让它与我的网格一起运行。我真的很感激任何提示或教程链接。到目前为止，我的代码以及我收集的有关该过程的内容如下：
我有我的网格：
editSettings = {
jqModal: false,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true,
onclickSubmit: editSubmit,
height: 200,
width: 400
},
addSettings = {
jqModal: false,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
onclickSubmit: addSubmit,
height: 200,
width: 400
},
$('#engineerGrid').jqGrid({
datatype: 'json',
colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
colModel: [
{name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
},
{ name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
},
{ name: 'ut', index: 'ut', width: 125, align: "left", editable: true, sorttype: 'number', formatter: 'number' }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
caption: 'Project Engineers',
editurl: 'clientArray',
url: '@Url.Action("EditProjectEngineerJQGridData","Project",new{projID = Model.projectID})'
}).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings);
});
我从服务器获取 json 信息，我认为因为我有 loadonce:true 设置，它应该将数据类型从 json 切换到本地。这是我开始感到困惑的地方。我是否需要手动编写所有 crud 函数并使用 onclickSubmit 链接到它们？如果是这种情况，有人愿意解释如何正确获取/设置数据吗？
addSubmit = function(){
//I think something needs to go here?
};
编辑：
以为我会为任何看到这一点的人重申。由于我没有太多经验，这可能是低水平的，但也许其他新手可以从外行的解释中受益。处理本地数据时，您不能使用表单编辑（删除除外）。但是，为了添加/编辑行，您可以使用 inlineNav。我的工作如下，有一些挑剔的部分，但就本地数据的添加/编辑/删除而言，它可以工作。
$(document).ready(function () {
var myData = [],
editOptions = {},
addOptions = {},
lastSel = -1,
parameters = {
edit: false,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
addParams: { useFormatter: false },
editParams: {}
},
myDelOptions = {
onclickSubmit: function (options, rowid) {
var grid = $('#engineerGrid');
// delete the row
grid.delRowData(rowid);
grid.trigger("reloadGrid", [{ page: 0}]);
return true;
},
processing: true
};
$('#engineerGrid').jqGrid({
datatype: 'json',
url: '@Url.Action("CreateProjectEngineerJQGridData", "Project")',
colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
colModel: [
{ name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
},
{ name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
},
{ name: 'ut', index: 'ut', width: 125, align: "left", editable: true, formatter: 'number',
formatoptions: { decimalPlaces: '0', defaultValue: '20'}
}
],
rowNum: 20,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
width: 750,
caption: 'Project Engineers',
editurl: 'clientArray',
onSelectRow: function (id) {
//if selected row changed restore values of previously selected row
if (id && id !== lastSel) {
jQuery('#engineerGrid').restoreRow(lastSel);
lastSel = id;
}
jQuery('#engineerGrid').editRow(id, true);
}
}).jqGrid('navGrid', '#pager', { edit: false, add: false, del: true }, editOptions, addOptions, myDelOptions);
jQuery("#engineerGrid").jqGrid('inlineNav', '#pager', parameters);
});
无论如何，感谢奥列格的帮助！