内联编辑不适用于Dynamic jqGrid [英] Inline edit not working on Dynamic jqGrid
问题描述
基于 Bruno的答案我创建了一个动态jqGrid，但内联编辑却没有似乎没有用:
Based on Bruno's answer I create a dynamic jqGrid but the inline-edit doesn't seems to work:
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选项播放，但结果相似.
预先感谢
I reduced the jqGrid code and played with jsonReader options but the results are similar.
Thanks in advance
编辑:我正在使用免费的jqGrid 4.9.2
I'm using free jqGrid 4.9.2
:通过改进的语法，这是使网格正常工作的方法:
This is the way to make the grid work, with improved syntax:
$(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');
});
推荐答案
您应该在 inlineNav之前包括navGrid 的调用:
You should include call of navGrid before inlineNav:
gridPreNomina.jqGrid('navGrid', "#pagerPreNomina",
{ add: false, edit: false, del: false, search: false, refresh: false });
gridPreNomina.jqGrid('inlineNav', "#pagerPreNomina", { add: false, edit: true });
最后，您应该在所有问题中写出哪个版本的jqGrid和哪个分支(免费的jqGrid ， Guriddo jqGrid JS ，jqGrid(旧版本< = 4.7)中使用. jqGrid的可能性，性能和选项越来越多地取决于人们使用的分支. 免费jqGrid 是我开发的fork，因此，我建议您使用最新的4.12.1免费的jqGrid版本.
Finally you should write in all questions which version of jqGrid and from which fork (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 is the fork which I develop, thus I would recommend you to use the latest 4.12.1 version of free jqGrid.
更新:您使用的colModel中存在其他问题.它没有没有具有editable: true 属性的列.您可以通过使用cmTemplate: { editable: true }选项将*所有列设置为默认可编辑.此外，免费的jqGrid不需要您调用navGrid.
UPDATED: There are exist additional problem in the colModel, which you use. It has no columns having editable: true property. You can set *all columns editable by default by usage cmTemplate: { editable: true } option. Moreover Free jqGrid don't required that you call navGrid.
请参阅演示 https://jsfiddle.net/OlegKi/w3b8862d/1/
这篇关于内联编辑不适用于Dynamic jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
