如果选择了电流,jqGrid将阻止选择新行&&警告点击复选框

时间:2015-12-01 19:38:22

标签: javascript jquery checkbox jqgrid

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

1 个答案:

答案 0 :(得分:0)

我建议您尝试使用free jqGrid。它是jqGrid的分支,我将近一年开发它。它允许使用您使用的inlineNavformatter: "actions"的内联编辑来显着简化代码。内联编辑的所有选项和回调都可以直接放在inlineEditing选项内的jqGrid选项中。我在the wiki article中描述了这个想法。查看演示它的the demo

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