我现在在jquery网格上一直在努力解决一些问题。
第一个是...如果我当前正在编辑当前行，如果在行外单击，我不希望它取消我的编辑并选择新行。我目前的代码是：
beforeSelectRow : function(id){
if($('tr#'+id).is('[editable="1"]') == '1'){
return false;
}
else if ($('tr#'+id).is('editable') != '1') {
return true;
}
}
我怎样才能让它发挥作用？
另外，我有一个带有复选框的列[部门头栏，是或否是值]。如果我有一个选中的复选框，我希望它在我点击一个新框而不离开编辑时弹出警告。
目前我设法为aftersavefunc制作了一个小代码，如果另一个框被选中，它会发出警报并将Yes更改为No，但它不是我需要的，因为它在保存行后会起作用。
var checkboxCol = grid.getCol('HeadDepartament');
var numberOfCheckedBoxes=[];
for(k=0;k<ids.length;k++){
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length >1){
grid.setCell(id, 'sefDepartament', 'No');
alert('Please deselect the other checked box first');
numberOfCheckedBoxes = 0;
}
}
}
更新[通过oleg的请求]：
$(function(){
var mydata = [
{id:0, nume:'Razvan', prenume:'Ciprian',username:'Razvan.Ciprian',email: 'Razvan.Ciprian@test.com','sefDepartament':'No',position: 'position 1',joinYear:'17-11-2015'},
{id:1, nume:'Jijel', prenume:'Codru',username:'Jijel.Codru',email: 'Jijel.Codru@test.com','sefDepartament':'No',position: 'position 5',joinYear:'18-11-2015'},
{id:2, nume:'Ionica', prenume:'Drumlung',username:'Ionica.Drumlung',email: 'Ionica.Drumlung@test.com','sefDepartament':'Yes',position: 'position 2',joinYear:'19-11-2015'},
{id:3, nume:'Rodent', prenume:'Dumitrache',username:'Rodent.Dumitrache',email: 'Rodent.Dumitrache@test.com','sefDepartament':'No',position: 'position 4',joinYear:'20-11-2015'}];
var grid = $('#grid');
var newId=0;
var newIdGeneratorFunction = function(){
return newId++ ;
};
var checkboxFormatFunc = function(cellvalue, options ,rowObject){
if(cellvalue == 'Yes')
return 'Yes';
else return 'No';
};
var afterSaveFunction = function(id){
var checkboxCol = grid.getCol('sefDepartament');
var ids = grid.jqGrid('getDataIDs');
var k;
var firstFoundId ;
var numberOfCheckedBoxes=[];
// Number of Checked Boxes Function begins;
for(k=0;k<ids.length;k++){
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length >1){
grid.setCell(id, 'sefDepartament', 'No');
alert('Please deselect the other checked box first');
numberOfCheckedBoxes = 0;
}
}
};
// Number of Checked Boxes Function ends;
};
var colModelSettings = [
{name:'id', label:'id',key: true,hidden: true,formatter: newIdGeneratorFunction , 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: { 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:'joinYear',editable:true,sorttype:'date',stype: 'datepicker',align: 'center',width: 70,
searchoptions:{sopt: ['eq','ne'],dataInit: function (elem) {
$(elem).datepicker(
{ dateFormat:'dd-mm-yy',
showButtonPanel: true }
)}},
editoptions:{size:20,defaultValue: ' ',
dataInit: function (elem) {
$(elem).datepicker(
{ showButtonPanel: true,
dateFormat:'dd-mm-yy',}
)}}},
{name:'experience', label:'Experience',searchoptions:{sopt: ['eq','bw','ew','cn']}, editable:false, editoptions:{defaultValue: ' '},align: 'center',width: 60},
{name:'actiuni',label: 'Actiuni',formatter: 'actions', formatoptions: {onEdit: onEditActionFunction,afterSave:afterSaveFunction},editable: false,sortable: false,search: false,width: 60 }
];
grid.jqGrid({
pager: '#pager',
data: mydata ,
datatype: 'local',
editurl:'clientArray',
height: 250,
loadonce: true,
viewrecords: true,
scrollOffset:0,
sortorder: 'asc',
caption:'Employee List' ,
autowidth: true,
colModel: colModelSettings,
beforeSelectRow : function(id){
if($('tr#'+id).is('[editable="1"]') == '1'){
return false;
}
else if ($('tr#'+id).is('editable') != '1') {
return true;
}
}
});
grid.jqGrid('navGrid', '#pager', {edit:false, add:false, save:false, cancel:false, search:true, searchtext: 'Search', refresh:true, del:false});
grid.jqGrid('inlineNav','#pager',
{
edit:true,
edittext: 'Edit',
save:true,
savetext: 'Save',
cancel: false,
add:true,
cancel: true,
canceltext: 'Cancel',
cancelicon: 'ui-icon-cancel',
addicon:'ui-icon-plus',
addtext: 'Add New Row',
addedrow: 'last',
addParams: {
position: 'last',
addRowParams: {
aftersavefunc : afterSaveFunction,
keys: true,
}
},
aftersavefunc : afterSaveFunction,
},
});
});
更新2：我设法阻止选择不同的行并在使用此功能编辑当前行时离开编辑：
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;}
答案 0 :(得分：0)
我建议您尝试使用free jqGrid。它是jqGrid的分支，我将近一年开发它。它允许使用您使用的inlineNav和formatter: "actions"的内联编辑来显着简化代码。内联编辑的所有选项和回调都可以直接放在inlineEditing选项内的jqGrid选项中。我在the wiki article中描述了这个想法。查看演示它的the demo。
要自定义选择或行，您可以使用beforeSelectRow，如果您需要阻止选择，则只返回false。这是正确的方法。