2014-12-03 77 views
-1

我在内联编辑中遇到问题,我有一个带分页器的jqGrid。如果用户更改三个单元格的值,则假设。编辑第三个单元格后,用户单击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' 
}); 
+0

请添加一些代码,以便人们可以帮助您正确。 – sidneydobber 2014-12-03 12:07:44

+0

请点击此链接查看代码。只需添加更多的数据即可激活分页功能:jsfiddle.net/aditib/CzWK/ – 2014-12-03 12:31:28

回答

0

是错误的使用cellEdit: true,如果你想使用在线编辑。另一方面,要使用内联编辑,您必须开始内联编辑,例如,您可以在onSelectRow回拨内(参见the documentation)开始editRow。所以你发布的代码只是忽略了editurl: 'clientArray',它的工作方式就像纯粹的单元格编辑

您遇到的主要问题是未保存的数据正在分页。为了解决这个问题,你需要在onPaging回调中明确调用saveCell方法。 saveCell所需的参数iRowiCol您可以获得标准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添加了一些选项。您可以运行代码并验证分页期间未保存数据的问题是否已解决。

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>