jqgrid内联编辑行和数据未对齐 [英] jqgrid inline edit rows and data not lining up
问题描述
我已经通过内联编辑实现了一个jqgrid:
I've implemented a jqgrid with inline edit:
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数据时，会将其数据加载到操作"列中，而将注释数据添加到Id列中，并将税金数据添加到注释列中.税栏为空.我认为这是因为加载数据时，操作"列中当前没有任何内容?
The problem is that it's not working as expected. The problem is that when the grid loads the Id data is loaded into the Actions column, the note data is added into the Id column and the tax data is added into the note column. The tax column is empty. I think this is because when the data is loaded there is nothing currently in the Actions column?
无论如何，只要加载了操作图标按钮，它们就会加载到正确的操作"列中，但位于错误列中的ID数据之上.
Anyway when the actions icon buttons load they load in the Actions column which is correct but over top of the Id data which is in the wrong column.
我已将其与其他工作示例进行了比较，但到目前为止尚未发现问题.
I've compared this with other working examples but so far have not found the problem.
刚刚发现此问题与json数据一起发生，但与本地数据无关.
Have just found this problem occurs with the json data but not local data.
因此，如果您将其提供给Json数据，例如:
So if you feed it Json data like:
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);
}
发生错误.但是，如果给它本地数据，例如:
The error happens. However if you give it local data like:
data: mydata,
datatype: 'local',
var mydata = [
{id:"1", note:"Note1", tax:"Tax1"},
{id:"2", note:"Note2", tax:"Tax2"},
{id:"3", note:"Note3", tax:"Tax3"}
]
很好.
推荐答案
我可以建议您两种解决问题的方法.第一个很简单.您应该在"cell"数组的第一列中添加":
I can suggest you two solution of the problem. The first one is very easy. You should include "" as the first column in the cell array:
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数据
In the case the code will produce the following JSON data
{
"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"] }
]
}
，数据将正确显示:请在第一个演示此处.
and the data will be correctly displayed: see the first demo here.
我建议的另一种方法是使用与以前相同的服务器代码，但在客户端定义如何读取数据:
The other way which I can suggest is to use the same server code as before, but to define on the client side how the data will be read:
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定义从诸如
这样的行对象中读取包含的列
In the example I defined first of all the jsonReader: { repeatitems: false } parameter which allows us to use not only arrays with one-to-one order like the column order in the colModel. Now we can use jsonmap which defines to read the column contain from the row object like
{ "id": "1", "cell": ["1", "Note1", "Tax1"] }
例如. jcGrid将以标准方式读取id属性(不是'Id').要从JSON数据行中读取其他任何包含的单元格，将调用jsonmap函数.我们只从cell数组中返回正确的字符串.
for example. The id property (not 'Id') will be read in the standard way by jqGrid. To read any other cell contain from the row of JSON data the jsonmap function will be called. We return just the correct string from the cell array.
很显然，如果将表示数据的行替换为
It is relatively clear to understand that you can simplify and reduce the size of the JSON data if you replace the row which represent the data to
["1", "Note1", "Tax1"]
在这种情况下，您只需为'Id'列添加key: true属性并更改jsonmap函数.例如，对于'tax'列，它应该为jsonmap: function (obj) { return obj[2]; } }.
In the case you should just add key: true property for the 'Id' column and change the jsonmap functions. For example for the 'tax' column it should be jsonmap: function (obj) { return obj[2]; } }.
最后，我建议您看一下 VS2010 演示项目.在我看来，这些演示可能会对您有所帮助.
At the end I would recommend you to take a look in the UPDATED part of the answer where you can download VS2008 or VS2010 demo project. It seems to me the demos could be helpful for you.
这篇关于jqgrid内联编辑行和数据未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
