我正在尝试为添加到 jqGrid 的新行分配一个唯一 ID。我使用免费的 jqGrid 4.11.0,服务器端的 java rest 服务和数据库的 MS SQL。
inlineEditing: {
ajaxSaveOptions: { contentType: "application/json" },
serializeSaveData: function (postData) {
var idArray = grid.getCol('id');
var count = 0;
var k = 1;
while(postData.id.search('jqg') != '-1'){
for(var i =0 ; i<idArray.length;i++){
if(k == idArray[i]){
count++;
}
if(count == 0){
postData.id = k ;
break;
}
}
k++;
}
return JSON.stringify(postData);
}
}
我注意到 jqGrid 给出的默认 ID 是 jqg + 一个数字。关于如何制作当前未在任何数据库记录中使用的唯一 ID 的任何建议?我应该从服务器端执行此操作还是可以在 jqGrid 代码中执行此操作?
在晚上的某个时候,这段代码有点工作,并继续为所有新行提供 id 7 [即使它应该继续增加]。经过一些更改[不记得有哪些更改],每次我单击保存将新行提交到服务器时,页面都会冻结,chrome 建议我应该终止该进程。
请让我知道什么以及我是否应该添加更多信息。
编辑1:
$(function () {
var grid = $('#grid'),
checkboxEditOptionEvents = [
{type : 'click', data: {'Yes': 'Yes'}, fn: function (e, id) {
var checkboxCol = grid.getCol('sefDepartament'),
ids = grid.jqGrid('getDataIDs'),
numberOfCheckedBoxes = [],
k;
for (k = 0; k < ids.length; k++) {
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length == 1){
alert('Please deselect the other checked box first');
$(this).prop("checked",false);
numberOfCheckedBoxes = 0;
}
}
}
}}];
var experienceFunction = function(cellvalue, options ,rowObject){
var joinYearVar = rowObject.joinYear,
YY = joinYearVar.slice(0,4),
MM = joinYearVar.slice(5,7),
DD= joinYearVar.slice(8,11);
return moment("\"" +YY+MM+DD+"\"" , "YYYYMMDD").fromNow();
};
var checkboxFormatFunc = function(cellvalue, options ,rowObject){
if(cellvalue == 'Yes'){
return 'Yes';
}
return 'No';
};
var afterSaveFunction = function(id){
var prenumeVar = grid.getCell(id, 'prenume').trim(),
numeVar = grid.getCell(id,'nume').trim(),
usernameVar = numeVar +'.'+ prenumeVar,
emailVar = usernameVar + '@test.com';
usernameVar =usernameVar.replace(/\s/g , '').trim();
emailVar = emailVar.replace(/\s/g , '');
grid.setCell(id, 'username', usernameVar);
grid.setCell(id, 'email', emailVar);
};
var colModelSettings = [
{name:'id', label:'id',key: true,hidden: true, width:10,sorttype:'number',editable: false},
{name:'nume',label:'Nume',width:90, align: 'center',editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']}, editrules:{required:true}, editoptions: {defaultValue: ' '},formatter: 'text'},
{name:'prenume',label:'Prenume',width:100,editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center',editrules:{required:true},editoptions: {defaultValue: ' '},formatter: 'text'},
{name:'username',label:'Username',searchoptions: {sopt: ['eq','bw','ew','cn']},width:125,align: 'center' },
{name:'email',label:'Email',width:135,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
{name:'sefDepartament',label:'Sef Departament',width:90,editable:true,align: 'center', stype:"select", searchoptions:{sopt: ['eq','ne'],value: "Yes:Yes;No:No"},formatter: checkboxFormatFunc,edittype:'checkbox',editoptions: { dataEvents: checkboxEditOptionEvents,value:'Yes:No', defaultValue: 'No' }},
{name:'position',label:'Position',editable:true,stype: 'select',formatter: 'select',searchoptions: {sopt: ['eq','ne'],value: ' : ;position 1:position 1;position 2:position 2;position 3:position 3;position 4:position 4;position 5:position 5'},
align: 'center',edittype:'select',editoptions:{defaultvalue: 'P0: ',value: ' : ;position 1:position 1;position 2:position 2;position 3:position 3;position 4:position 4;position 5:position 5'},width: 75},
{name:'joinYear',label:'Join Year',formatter:'date', formatoptions: {newformat:'d-m-Y'}, datefmt: 'dd-mm-yyyy', editable:true,searchtype: 'datepicker',align: 'center',width: 70,
searchoptions:{dateFormat:'dd-mm-yy',dataInit: function (elem){
$(elem).datepicker({ showButtonPanel: true, dateFormat: 'yy-mm-dd'});},sopt: ['eq','ne']},
editoptions:{size:20,defaultValue: ' ',dataInit: function (elem) {
$(elem).datepicker({ showButtonPanel: true, dateFormat: 'dd-mm-yy'});
}}},
{name:'experience', label:'Experience', formatter: experienceFunction, searchoptions:{sopt: ['eq','bw','ew','cn']}, editable:'hidden', editoptions:{defaultValue: ' '},align: 'center',width: 60},
{name:'actiuni',label: 'Actiuni',formatter: 'actions', formatoptions: {afterSave:afterSaveFunction},editable: false,sortable: false,search: false,width: 20 }
];
grid.jqGrid({
pager: '#pager',
url: "/RestWithDatabaseConnection/rest/fetchData",
editurl:'/RestWithDatabaseConnection/rest/update',
datatype: "json",
height: 250,
viewrecords: true,
scrollOffset:0,
sortorder: 'asc',
caption:'Employee List' ,
autowidth: true,
colModel: colModelSettings,
beforeSelectRow : function(id){
var idsArray = grid.jqGrid('getDataIDs');
var i;
for(i=0;i<idsArray.length;i++){
if($('#'+idsArray[i]).is('[editable="1"]') ){
grid.editRow(idsArray[i],true);
return false;
}
}
return true;
},
inlineEditing: {
ajaxSaveOptions: { contentType: "application/json" },
serializeSaveData: function (postData) {
var idArray = grid.getCol('id');
var count = 0;
var k = 1;
while(postData.id.search('jqg') != '-1'){
for(var i =0 ; i<idArray.length;i++){
if(k == idArray[i]){
count++;
}
if(count == 0){
postData.id = k ;
break;
}
}
k++;
}
return JSON.stringify(postData);
}
}
});
grid.jqGrid('navGrid', '#pager', {edit:false, add:false, delete:true, save:false, cancel:false, search:true, searchtext: 'Search', refresh:true},
{},{},{
url: '/RestWithDatabaseConnection/rest/delete',
mtype: 'DELETE',
reloadAfterSubmit: true,
ajaxDelOptions: {
contentType: "application/json",
},
serializeDelData: function(postdata) {
return JSON.stringify(postdata);
}},{},{},{},{} );
grid.jqGrid('inlineNav','#pager',
{
edit:true,
edittext: 'Edit',
save:true,
savetext: 'Save',
add:true,
cancel: true,
canceltext: 'Cancel',
cancelicon: 'ui-icon-cancel',
addicon:'ui-icon-plus',
addtext: 'Add',
addedrow: 'last',
addParams: {
position: 'last',
addRowParams: {
aftersavefunc : afterSaveFunction,
keys: true,
}
},
editParams:{
url: '/RestWithDatabaseConnection/rest/update',
mtype : "POST",
keys: true,
aftersavefunc : afterSaveFunction,
}
})})
Edit2 - 服务器响应 fetchData :
[{"id":"3","nume":"Aladin","prenume":"Zoro","username":"Aladin.Zoro","email":"Aladin.Zoro@test.com","sefDepartament":"Yes","position":"position 4","joinYear":"2015-11-08","experience":"2 months"},
{"id":"2","nume":"Harap","prenume":"Alb","username":"Harap.Alb","email":"Harap.Alb@test.com","sefDepartament":"No","position":"position 1","joinYear":"2016-01-03","experience":"9 days "},
{"id":"4","nume":"Don","prenume":"Homa","username":"Don.Homa","email":"Don.Homa@test.com","sefDepartament":"No","position":"position 4","joinYear":"2015-09-06","experience":"4 months"},
{"id":"5","nume":"Dorel","prenume":"Gigel","username":"Dorel.Gigel","email":"Dorel.Gigel@test.com","sefDepartament":"No","position":"position 4","joinYear":"2016-01-10","experience":"2 days"},
{"id":"1","nume":"Ivan","prenume":"Stefan","username":"Ivan.Stefan","email":"Ivan.Stefan@test.com","sefDepartament":"No","position":"position 2","joinYear":"2016-01-10","experience":"2 days"}]
以下是解决您的主要问题和改进您发布的 JavaScript 代码的一些建议。
首先,新的rowid产生局部需要本地编辑场景。如果将后端的数据保存在数据库中,则应该在服务器上生成新的 rowid 。典型的实现包括在每个表中
PRIMARY KEY
定义。它使 ID 唯一且固定。删除某行并创建新行永远不会被解释为对旧行的编辑,因为新行将始终获得新 id,这是以前从未使用过的(在表中)。int IDENTITY
要利用在服务器端生成的 id,有两个主要选择:
aftersavefunc
在服务器上成功创建行后,可以使用回调(仅用于添加新行)来更新 rowid。RESTful 服务的许多标准实现都会在添加或编辑时返回包含 id 的完整行数据。可以使用aftersavefunc
回调中的数据并使用类似$("#" + rowid).attr("id", newRowid);
更新新行的方法。它将 id 保存在一些附加列中(就像您使用隐藏id
列),然后应该setCell
另外使用方法来更新单元格。第一个选择最简单,我建议您首先实施它。只有当网格的重新加载不能满足用户的需求时,他们会逐行添加许多行,那么您应该多写一点代码并实现第二种场景。
您当前使用
inlineNav
的代码用于添加和编辑操作,使用内联编辑实现,以及navGrid
删除操作的方法,使用表单编辑实现。表单编辑,包括删除,reloadAfterSubmit: true
默认使用选项。这意味着网格将url: "/RestWithDatabaseConnection/rest/fetchData"
在删除每一行后从服务器(从)重新加载。您可以通过替换afterSaveFunction
以下内容来解决您的主要问题:选项
current
重装之后保持当前的选择和选项fromServer: true
都感觉只有在情况下,如果你使用loadonce: true
的选项还。单击导航栏的“刷新/重新加载”按钮,您可以仅使用reloadGridOptions: {fromServer: true}
选项navGrid
来强制从服务器重新加载数据。如果您没有太多需要在网格中显示的数据(例如少于 1000 行),那么建议使用这种行为。一些更常见的建议,以改进您的代码:
您可以考虑使用
height: "auto"
代替height: 250
和通过指定rowNum
值来管理网格的最大高度。scrollOffset: 0
在这种情况下将不需要该选项。从服务器返回的数据格式看起来如此,您没有实现服务器端分页、排序和过滤。你应该使用
loadonce: true
和forceClientSorting: true
选项。该loadonce: true
运筹学的jqGrid保存所有从服务器内部本地返回的数据data
参数。您可以随时通过使用访问数组$('#grid').jqGrid("getGridParam", "data")
。的值rowNum
(默认值为 20)将用于本地分页。在sortname
与sortorder
将被用于当地的排序。并且您将使用搜索对话框(由 加入navGrid
)或过滤器工具栏(由 加入filterToolbar
)用于本地搜索/过滤。它简化了服务器代码,从用户的角度提高了网格的性能,并简化了服务器和客户端之间的接口。您可以在服务器上使用经典的 RESTful 接口,无需任何扩展。另一句话:我建议您删除不需要的隐藏
id
列 (name:'id', label:'id', key: true, hidden: true, ...
)。rowid的信息会保存在id
rows(<tr>
元素)的属性中,不需要<td>
在每一行的隐藏元素中都保存重复的信息。您的代码还有许多其他部分可以改进。例如,您在服务器端使用的 DELETE 操作似乎很奇怪。您使用
mtype: 'DELETE'
,但您将请求正文中已删除行的 id发送到服务器,而不是将其附加到 URL。对应于标准,HTTP DELETE 不应包含body。您可以使用 jqGrid 选项formDeleting
指定所有删除选项,您可以将url
参数定义为函数:您需要修改您的服务器代码
/RestWithDatabaseConnection/rest/delete/
以使用相同的通信协议并从 URL 中获取删除的 id。您可以使用
navOptions
免费 jqGrid 的参数来指定以下选项navGrid
:(
searchtext: 'Search'
和您使用的其他选项似乎有默认值,我在那里删除了)。为了更接近 REST 标准,可以使用 HTTP PUT 操作进行行编辑,使用 HTTP POST 来添加新行。您应该在后端为这两个操作实现不同的入口点。您
/RestWithDatabaseConnection/rest/update
已经使用并且可以实现/RestWithDatabaseConnection/rest/create
添加新行。inlineEditing
例如,您可以使用以下更改来实现该场景: