jqGrid中的内联编辑不起作用 [英] Inline editing in jqGrid not working

问题描述

我在内联编辑中遇到问题，我有一个带有分页器的jqGrid.如果用户更改了三个单元格的值，则为假.编辑第三个单元格后，用户单击jqGrid寻呼机的下一页按钮.现在，当用户返回到第一页时，仅保留前两个单元格的更改值，而第三个单元格丢失.请提出如何保留所有单元格的值..?

I am facing an issue in Inline editing, I have a jqGrid with pager. If the user changes the value of three cells suppose. After editing the third cell the user clicks on the next page button of the jqGrid pager. Now when the user returns back to the first page, only the changed values of the first two cells are retained and the third is lost. Please suggest how to retain the values of all the cells..?

示例代码:

var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true,
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    rowNum: 10,
    pager: '#pager',
    'cellEdit': true,
    'cellsubmit' : 'clientArray',
    editurl: 'clientArray'
});

推荐答案

如果要使用内联编辑，则使用cellEdit: true是错误的.另一方面，要使用内联编辑，您必须 start 进行内联编辑，例如，您可以在onSelectRow回调内部启动editRow(请参见

It's wrong to use cell true if you want to use inline editing. On the other side to use inline editing you have to start inline editing, for example you can start editRow inside of onSelectRow callback (see the documentation). So the code which you posted just ignores editurl: 'clientArray' and it works like pure cell editing.

您遇到的主要问题是分页上的未保存的数据.要解决该问题，您只需显式调用 saveCell 方法在 onPaging 回调中.您可以将saveCell所需的参数iRow和iCol作为标准jqGrid的属性获得

The main problem which you have is unsaved data on paging. To solve the problem you need just call explicitly saveCell method inside of onPaging callback. The parameters iRow and iCol required for saveCell you can get as the property of the standard jqGrid options (using getGridParam method). The corresponding code can be line below:

onPaging: function () {
    var $self = $(this), p = $self.jqGrid("getGridParam");
    $self.jqGrid("saveCell", p.iRow, p.iCol);
}

代码中的下一个潜在问题:数据不完整.输入数据应该包含id属性，以标识输入数据的每一项.输入数据数组包含例如多个Toronto项目.在您的测试输入中可能只是一个问题.数据可以以 sorted 形式显示在网格中，因此很难区分项目.强烈建议分配id属性.您可以稍后使用$("#grid").jqGrid("getGridParam", "data")获取修改后的数据，并根据ID将项目与原始数据进行比较，以查看更改了哪些数据.

The next potential problem in your code: the data are not full. The input data should contains id property to identify every item of input data. The array of input data contains for example multiple Toronto items. It could be just a problem in your test input. The data can be displayed in the grid in sorted form, so to it will be difficult to distinguish the items. It's strictly recommended to have id property assigned. You can get the modified data later using $("#grid").jqGrid("getGridParam", "data") and compare items with original data based on the id to see which one were changed.

我建议您为每个项目添加唯一的id属性.例如可以是1,2,3或10,20,30或类似的东西.相应的修改代码如下.我也向jqGrid添加了一些选项.您可以运行代码并验证是否可以解决分页期间未保存的数据的问题.

I suggest that you add unique id property to every item. It could be for example 1,2,3 or 10,20,30 or something like that. The corresponding modified code is below. I added some options to jqGrid too. You can run the code and verify that the problem with unsaved data during paging is solved.

var mydata = [{
    id: 10,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 20,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 30,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 40,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 50,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 60,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 70,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 80,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 90,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 100,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 110,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 120,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 130,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 140,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 150,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 160,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 170,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 180,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 190,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 200,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 210,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 220,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 230,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 240,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 250,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 260,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 270,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 280,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 290,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 300,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 310,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 320,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 330,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 340,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 350,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 360,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 370,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 380,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 390,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 400,
    name: "Paris",
    country: "France",
    continent: "Europe"
}];

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [
      { name: 'name' },
      { name: 'country' },
      { name: 'continent' }
    ],
    cmTemplate: { editable: true },
    rowNum: 10,
    pager: '#pager',
    cellEdit: true,
    cellsubmit: 'clientArray',
    rownumbers: true,
    gridview: true,
    autoencode: true,
    height: 'auto',
    onPaging: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");
        $self.jqGrid("saveCell", p.iRow, p.iCol);
    }
});

html, body { font-size: 75%; }
.ui-jqgrid-hdiv { overflow-y: hidden; }

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
  $.jgrid.no_legacy_api = true;
  $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>

这篇关于jqGrid中的内联编辑不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！