jqgrid内联编辑行和数据不排队

我已经使用内联编辑实现了一个jqgrid：

var lastSel; jQuery(document).ready(function () { jQuery("#list").jqGrid({ url: '/Home/DynamicGridData/', datatype: 'json', mtype: 'POST', colNames: ['Actions', 'Id', 'note', 'tax'], colModel: [ {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions', formatoptions:{ keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing. onEdit:function(rowid) { alert("in onEdit: rowid="+rowid+"\nWe don't need return anything"); }, },}, { name: 'Id', index: 'Id', width: 55,align:'center', editable: false }, { name: 'note', index: 'note', width: 40,align:'center', editable: true }, { name: 'tax', index: 'tax', width: 40,align:'center', editable: true}], pager: jQuery('#pager'), rowNum: 10, rowList: [5, 10, 20, 50], sortname: 'Id', sortorder: "desc", viewrecords: true, imgpath: '', caption: 'My first grid', editurl: '/Home/Save/' }); jQuery("#list").navGrid('#pager', { edit: false, search: false, add: false }); }); 

问题是它没有按预期工作。 问题是，当网格加载时，Id数据被加载到Actions列中，注释数据将添加到Id列中，税务数据将添加到注释列中。 税栏为空。 我认为这是因为加载数据时，“操作”列中目前没有任何内容？

无论如何，当操作图标按钮加载时，它们会在“操作”列中加载，该列是正确的但位于错误列中的Id数据之上。

我将此与其他工作示例进行了比较，但到目前为止还没有发现问题。

编辑：

刚发现json数据发生了这个问题，但没有发现本地数据。

所以，如果你喂它Json数据，如：

 public JsonResult DynamicGridData2(string sidx, string sord, int page, int rows) { int totalPages = 1; // we'll implement later int pageSize = rows; int totalRecords = 3; // implement later var jsonData = new { total = totalPages, page = page, records = totalRecords, rows = new[]{ new {id = 1, cell = new[] {"1", "Note1", "Tax1"}}, new {id = 2, cell = new[] {"2", "Note2", "Tax2"}}, new {id = 3, cell = new[] {"3", "Note3", "Tax3"}} } }; return Json(jsonData); } 

发生错误。 但是，如果您给它本地数据，如：

 data: mydata, datatype: 'local', var mydata = [ {id:"1", note:"Note1", tax:"Tax1"}, {id:"2", note:"Note2", tax:"Tax2"}, {id:"3", note:"Note3", tax:"Tax3"} ] 

没关系。

Answer 1

我可以建议你解决这个问题。 第一个很容易。 您应该在cell数组中包含“”作为第一列：

 public JsonResult DynamicGridData2(string sidx, string sord, int page, int rows) { // ... var jsonData = new { // ... rows = new[]{ new {id = 1, cell = new[] {"", "1", "Note1", "Tax1"}}, new {id = 2, cell = new[] {"", "2", "Note2", "Tax2"}}, new {id = 3, cell = new[] {"", "3", "Note3", "Tax3"}} } }; return Json(jsonData); } 

在这种情况下，代码将生成以下JSON数据

 { "total": "1", "page": "1", "records": "3", "rows": [ { "id": "1", "cell": ["", "1", "Note1", "Tax1"] }, { "id": "2", "cell": ["", "2", "Note2", "Tax2"] }, { "id": "3", "cell": ["", "3", "Note3", "Tax3"] } ] } 

并且数据将正确显示：请参阅此处的第一个演示。

我建议的另一种方法是使用与以前相同的服务器代码，但要在客户端定义如何读取数据：

 colModel: [ {name: 'act', index: 'act', width: 55, sortable: false, formatter: 'actions', formatoptions: { // we want use [Enter] key to save the row and [Esc] to cancel editing. keys: true, onEdit:function(rowid) { alert("in onEdit: rowid="+rowid+"\nWe don't need return anything"); } }, jsonmap: function (obj) { return ''; }}, { name: 'Id', index: 'Id', width: 55, jsonmap: function (obj) { return obj.cell[0]; } }, { name: 'note', index: 'note', width: 40, editable: true, jsonmap: function (obj) { return obj.cell[1]; } }, { name: 'tax', index: 'tax', width: 40, editable: true, jsonmap: function (obj) { return obj.cell[2]; } } ], jsonReader: { repeatitems: false }, cmTemplate: { align: 'center' } 

请在此处查看下一个演示。

在示例中，我首先定义了jsonReader: { repeatitems: false }参数，该参数允许我们不仅使用具有一对一顺序的数组，例如colModel的列顺序。 现在我们可以使用jsonmap定义从行对象中读取包含的列

  { "id": "1", "cell": ["1", "Note1", "Tax1"] } 

例如。 jqGrid将以标准方式读取id属性（不是’Id’）。 要从JSON数据行中读取任何其他单元格，将调用jsonmap函数。 我们从cell数组中返回正确的字符串。

相对清楚的是，如果将代表数据的行替换为，则可以简化和减小JSON数据的大小

 ["1", "Note1", "Tax1"] 

在这种情况下，您应该只为'Id'列添加key: true属性并更改jsonmap函数。 例如，对于'tax'列，它应该是jsonmap: function (obj) { return obj[2]; } } jsonmap: function (obj) { return obj[2]; } } 。

最后，我建议您查看答案的UPDATED部分，您可以在其中下载VS2008或VS2010演示项目。 在我看来，演示可能对你有所帮助。