内联编辑不适用于动态jqGrid

根据Bruno的回答,我创建了一个动态的jqGrid,但内联编辑似乎不起作用:

var colN = '{ "JSON":"success","colNames":["Id","Name","Check In","Check Out","Check In","Check Out","Check In","Check Out","Check In","Check Out"],'; var colM = '"colModel":[ { "name": "IdEmployee", "index": "IdEmployee", "jsonmap":"IdEmployee", "width": "120", "align": "center", "key": "true", "editable": "false"},{ "name": "NameEmp", "index": "NameEmp", "jsonmap":"NameEmp", "width": "450", "align": "center", "editable": "false"},{ "name": "IDay7", "index": "IDay7", "jsonmap": "IDay7", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay7", "index": "ODay7", "jsonmap": "ODay7", "width": "170", "align": "center", "editable": "true"},{ "name": "IDay8", "index": "IDay8", "jsonmap": "IDay8", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay8", "index": "ODay8", "jsonmap": "ODay8", "width": "170", "align": "center", "editable": "true"},{ "name": "IDay9", "index": "IDay9", "jsonmap": "IDay9", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay9", "index": "ODay9", "jsonmap": "ODay9", "width": "170", "align": "center", "editable": "true"},{ "name": "IDay10", "index": "IDay10", "jsonmap": "IDay10", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay10", "index": "ODay10", "jsonmap": "ODay10", "width": "170", "align": "center", "editable": "true"}],'; var colG = '"gridModel":{ "dataset":[{"IdEmployee":"560","NameEmp":"LAS","IDay9":"07:37:07","ODay9":"20:04:46","IDay10":"20:01:35","ODay10":"07:38:47"},{"IdEmployee":"859","NameEmp":"APA","IDay7":"19:29:37","ODay7":"08:05:00","IDay8":"19:29:19","ODay8":"08:00:12","IDay9":"19:31:36","ODay9":"08:00:59"},{"IdEmployee":"864","NameEmp":"MRT","IDay8":"07:17:21","ODay8":"20:07:27","IDay9":"07:20:01","ODay9":"20:07:24"}],"page":"1","records":"3","total":"1"}}'; var jsonGrid = jQuery.parseJSON(colN + colM + colG); var gridPreNomina = $("#tblPreNomina"); gridPreNomina.jqGrid({ jsonReader: { root: "dataset", id: "IdEmployee", page: "page", total: "total", records: "records" }, datatype: 'jsonstring', datastr: jsonGrid.gridModel, colNames: jsonGrid.colNames, colModel: jsonGrid.colModel, pager: $('#pagerPreNomina'), rowList: [], rowNum: '', loadonce: true, width: '1200', height: '100', viewrecords: true }) gridPreNomina.jqGrid('inlineNav', "#pagerPreNomina", { add: false, edit: true }); 

我减少了jqGrid代码并使用jsonReader选项,但结果相似。

提前致谢

编辑:我正在使用免费的jqGrid 4.9.2

EDIT2:这是使网格工作的方法,改进了语法:

 $(function () { "use strict"; var colN = '{ "JSON":"success","colNames":["Id","Name","Check In","Check Out","Check In","Check Out","Check In","Check Out","Check In","Check Out"],'; var colM = '"colModel":[ { "name": "IdEmployee", "index": "IdEmployee", "jsonmap":"IdEmployee", "width": "120", "align": "center", "key": "true", "editable": "false"},{ "name": "NameEmp", "index": "NameEmp", "jsonmap":"NameEmp", "width": "450", "align": "center", "editable": "false"},{ "name": "IDay7", "index": "IDay7", "jsonmap": "IDay7", "width": "170", "align": "center"},{ "name": "ODay7", "index": "ODay7", "jsonmap": "ODay7", "width": "170", "align": "center"},{ "name": "IDay8", "index": "IDay8", "jsonmap": "IDay8", "width": "170", "align": "center"},{ "name": "ODay8", "index": "ODay8", "jsonmap": "ODay8", "width": "170", "align": "center"},{ "name": "IDay9", "index": "IDay9", "jsonmap": "IDay9", "width": "170", "align": "center"},{ "name": "ODay9", "index": "ODay9", "jsonmap": "ODay9", "width": "170", "align": "center"},{ "name": "IDay10", "index": "IDay10", "jsonmap": "IDay10", "width": "170", "align": "center"},{ "name": "ODay10", "index": "ODay10", "jsonmap": "ODay10", "width": "170", "align": "center"}],'; var colG = '"gridModel":{ "dataset":[{"IdEmployee":"560","NameEmp":"LAS","IDay9":"07:37:07","ODay9":"20:04:46","IDay10":"20:01:35","ODay10":"07:38:47"},{"IdEmployee":"859","NameEmp":"APA","IDay7":"19:29:37","ODay7":"08:05:00","IDay8":"19:29:19","ODay8":"08:00:12","IDay9":"19:31:36","ODay9":"08:00:59"},{"IdEmployee":"864","NameEmp":"MRT","IDay8":"07:17:21","ODay8":"20:07:27","IDay9":"07:20:01","ODay9":"20:07:24"}],"page":"1","records":"3","total":"1"}}'; var jsonGrid = jQuery.parseJSON(colN + colM + colG); $("#tblPreNomina").jqGrid({ jsonReader: { root: "dataset", id: "IdEmployee" }, cmTemplate: { editable: true, autoResizable: true }, iconSet: "fontAwesome", datatype: "jsonstring", datastr: jsonGrid.gridModel, colNames: jsonGrid.colNames, colModel: jsonGrid.colModel, pager: true, width: 1200, height: 100, viewrecords: true, navOptions: {add: false, edit: false, del: false, search: false, refresh: false }, inlineNavOptions: { edit: true } }).jqGrid('inlineNav'); }); 

的jsfiddle

你应该在navGrid 之前包含对navGrid调用:

 gridPreNomina.jqGrid('navGrid', "#pagerPreNomina", { add: false, edit: false, del: false, search: false, refresh: false }); gridPreNomina.jqGrid('inlineNav', "#pagerPreNomina", { add: false, edit: true }); 

最后你应该在所有问题中写下你使用的jqGrid版本和哪个fork( 免费jqGrid , Guriddo jqGrid JS ,旧版本中的jqGrid <= 4.7)。 jqGrid的可能性,性能和选项越来越多地取决于使用的fork。 免费jqGrid是我开发的fork,因此我建议你使用最新的4.12.1版本的免费jqGrid。

更新:您使用的colModel中存在其他问题。 它没有具有editable: true属性的 。 默认情况下,您可以使用cmTemplate: { editable: true }选项设置*所有列cmTemplate: { editable: true } 。 此外,免费的jqGrid不需要你调用navGrid

参见演示https://jsfiddle.net/OlegKi/w3b8862d/1/