Question

我在内联编辑中面临一个问题，我有一个带有寻呼机的jqGrid。如果用户改变了三个单元格的值。编辑第三个单元格后，用户单击jqGrid寻呼机的下一页按钮。现在，当用户返回到第一页时，仅保留前两个单元格的更改值，并且第三个单元格丢失。请建议如何保留所有单元格的值..？

示例代码：

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

Answer 1

如果您想使用内联编辑，则使用cellEdit: true是错误的。另一方面，要使用内联编辑，您必须开始内联编辑，例如，您可以在editRow回调中启动onSelectRow（请参阅the documentation）。因此，您发布的代码只会忽略editurl: 'clientArray'，它就像纯单元格编辑一样。

您遇到的主要问题是分页上未保存的数据。要解决此问题，您只需在saveCell回调中明确调用onPaging方法。 iRow所需的参数iCol和saveCell可以作为标准jqGrid options（使用getGridParam方法）的属性获取。相应的代码可以在下面排成一行：

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

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

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

＆＃13;

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);
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

jqGrid中的内联编辑无效

1 个答案: