2016-01-20 216 views
1

基于Bruno's answer我创建了一个动态的jqGrid但直列编辑似乎并不工作:联编辑不工作动态的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

回答

0

您应该包括致电navGridinlineNav

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

最后,你应该在所有的jqGrid和版本从叉(free jqGridGuriddo jqGrid JS,jqGrid的一个老版本< = 4.7)您使用的问题写。 jqGrid的可能性,性能和选项越来越依赖于使用的fork。 Free jqGrid是我开发的分支,因此我建议您使用免费jqGrid的最新4.12.1版本。

已更新:在您使用的colModel中还存在其他问题。它有没有列有editable: true属性。您可以通过使用cmTemplate: { editable: true }选项设置默认编辑的所有列。此外免费jqGrid不要求您致电navGrid

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

+0

感谢您对Oleg的快速响应。不幸的是,包括对“navGrid”的调用仍然不起作用,我尝试了最新版本,仍然无法正常工作 –

+0

@DarK_WisH:不客气!请参阅** UPDATED **部分我的答案。我建议您另外更新到最新的免费jqGrid 4.12.1。 – Oleg

+0

你的例子不起作用。但是,如果我删除所有“可编辑:真”,并保留“cmTemplate”它的作品!再次感谢,也为我展示了新的免费jqGrid语法! –