内联编辑不适用于 Dynamic jqGrid

Question

基于 Bruno's answer 我创建了一个动态 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":"L A S","IDay9":"07:37:07","ODay9":"20:04:46","IDay10":"20:01:35","ODay10":"07:38:47"},{"IdEmployee":"859","NameEmp":"A P A","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":"M R T","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":"L A S","IDay9":"07:37:07","ODay9":"20:04:46","IDay10":"20:01:35","ODay10":"07:38:47"},{"IdEmployee":"859","NameEmp":"A P A","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":"M R T","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

Answer 1

您应该在 inlineNav:

之前包括 navGrid 的调用
gridPreNomina.jqGrid('navGrid', "#pagerPreNomina", { add: false, edit: false, del: false, search: false, refresh: false }); gridPreNomina.jqGrid('inlineNav', "#pagerPreNomina", { add: false, edit: true });

最后你应该在所有问题中写下哪个版本的 jqGrid 和哪个分支（free jqGrid, Guriddo jqGrid JS, jqGrid in an old version <=4.7) you use. The possibilities, the performance and the options of jqGrid depends more and more from the fork which one uses. Free jqGrid 是我开发的分支，因此我建议你使用最新的 4.12.1 版本的免费 jqGrid。

更新： 您使用的 colModel 中存在其他问题。它 没有包含 editable: true 属性的列。您可以通过使用 cmTemplate: { editable: true } 选项将 *所有列默认设置为可编辑。此外，免费的 jqGrid 不需要您调用 navGrid.

观看演示 https://jsfiddle.net/OlegKi/w3b8862d/1/

内联编辑不适用于 Dynamic jqGrid

Inline edit not working on Dynamic jqGrid

jquery

jqgrid