在JqGrid中自动完成上下键导航

时间:2014-02-17 07:22:04

标签: jqgrid

我使用修改后的cellEdit(完全上下左右单元格导航)获得了JqGrid。

这里有一些jqgrid.src:

                if (e.keyCode === 37)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("prevCell",iRow,iCol);} //left
                    } else {
                        return false;
                    }
                }
                if (e.keyCode === 39)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("nextCell",iRow,iCol);} //right
                    } else {
                        return false;
                    }
                }
                if (e.keyCode === 38)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("prevRow",iRow,iCol);} //up
                    } else {
                        return false;
                    }
                }   
                if (e.keyCode === 40)  {
                    if(!$t.grid.hDiv.loading ) {
                        {$($t).jqGrid("nextRow",iRow,iCol);} //down

                    } else {
                        return false;
                    }
                }

和其他人

    nextCell : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        for (i=iCol+1; i<$t.p.colModel.length; i++) {
            if ($t.p.colModel[i].editable ===true && $t.p.colModel[i].hidden !== true ) {
                //alert($t.p.colModel[i-1].hidden);
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
},
prevCell : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        for (i=iCol-1; i>=0; i--) {
            if ($t.p.colModel[i].editable ===true && $t.p.colModel[i].hidden !== true ) {
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
},
prevRow : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        iRow--;
        iCol++;
        for (i=iCol-1; i>=0; i--) {
            if ( $t.p.colModel[i].editable ===true) {
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
},
nextRow : function (iRow,iCol) {
    return this.each(function (){
        var $t = this, nCol=false, i;
        if (!$t.grid || $t.p.cellEdit !== true) {return;}
        // try to find next editable cell
        iRow++;
        iCol++;
        for (i=iCol-1; i>=0; i--) {
            if ( $t.p.colModel[i].editable ===true) {
                nCol = i; break;
            }
        }
        if(nCol !== false) {
            $($t).jqGrid("editCell",iRow,nCol,true);
        } else {
            if ($t.p.savedRow.length >0) {
                $($t).jqGrid("saveCell",iRow,iCol);
            }
        }
    });
}

此外,我在使用JqGrid事件后获得自动完成功能:#EditCell:

getautocompl = function(rowid,cellname,value,iRow,iCol){
setTimeout(function() { $("#"+iRow+"_"+cellname).select().focus();},10);
if(cellname!=='date_factory' || cellname!=='date_otgr_factory' || cellname!=='date_shipment' || cellname!=='date_sklad' || cellname!=='kolinkor'
|| cellname!=='kolkor' || cellname!=='kol_quantity' || cellname!=='description') {
    $("#"+iRow+"_"+cellname).autocomplete({
        source:"../../phpmon/autocomplete.php?fname="+cellname,
        delay:250,
        minLength: 2});
}

}

问题在于我无法管理自动填充热键,当我点击&#34; down&#34;按钮它只是转到下一个单元格,而不是任何自动完成选项。

2 个答案:

答案 0 :(得分:2)

当autocomplete元素可见时,您可以禁止jqgrid导航。类似的东西:

$(document).keydown(function( fn ){
      var key = fn.keyCode;
      if( $("#autocomplete") && key == 40)
           /* your autocomplete action*/
});

答案 1 :(得分:0)

它不是我所需要的,但它帮助我做到了。

我刚刚修改了jqgrid源代码:

if (e.keyCode === 40)  {
                    if(!$t.grid.hDiv.loading ) {
                        if ($('.ui-menu-item').length < 1) {
                        {$($t).jqGrid("nextRow",iRow,iCol);} //down
                        }
                    } else {
                        return false;
                    }
                }

其中.ui-menu-item是自动完成小部件的类。

很多