Question

我已经使用内联编辑实现了一个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"] }
    ]
}

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

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

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' }

请参阅下一个演示here。

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

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

例如，

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

相对清楚地了解，如果将代表数据的行替换为

，则可以简化和减小JSON数据的大小。

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

如果您要为key: true列添加'Id'属性，请更改jsonmap个功能。例如，对于'tax'列，它应为jsonmap: function (obj) { return obj[2]; } }。

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

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

1 个答案: