jqGrid防止在选择当前行时选择新行&&提醒复选框单击

Question

我在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;}

Answer 1

我建议您尝试使用免费的jqGrid 。 这是我将近一年以来开发的jqGrid的分支。 它允许使用inlineNav和formatter: "actions"使用的formatter: "actions"的内联编辑来大大简化您的代码。 您可以将所有内联编辑的选项和回调直接放置在inlineEditing选项内的inlineEditing选项中。 我在Wiki文章中描述了这个想法。 查看演示它的演示。

要自定义选择项或行，可以使用beforeSelectRow ，如果需要阻止选择，则返回false 。 这是正确的方法。