0

我正在尝试使用 asp.net gridview 的键编写表格导航。这就是我到目前为止所拥有的。它工作正常，但速度很慢。请看一下，如果可能的话，让我知道如何提高性能。

基本上它是带有输入元素的 html 表。table的结构是这样的

<table>
<tr>
<td>
<div style="height:22px;">
     <input type = "text">
</div>
</td>
</tr>
<tr>
<td>
<div style="height:22px;">
     <input type = "text">
</div>
</td>
</tr>
...
</table>
jQuery(function($) {
             $('table#<%= myTable.ClientID %>')
                .bind('keydown', funcKeyDown)
        });


function funcKeyDown(event)
        {   
            //get cell element.
            var cell = event.target;

            //get current cellIndex
            var $cell = $(cell);         
            var currCell = $cell.parents("td"); 
            var cellIndex = currCell[0].cellIndex;
            //get current rowIndex
            var currRow = $cell.parents("tr");
            var rowIndex = currRow[0].rowIndex;   

            var nextRowIndex, targetElem = null; 
            var nextCell;           
            switch(event.keyCode) {                
                case 13: //enter key
                    if(shiftKeyPressed == 1){
                        //move left                        
                        if(!(cellIndex == 0)){                        
                        targetElem = currRow.children("td").eq(cellIndex-1).find("input[type=text]");
                        if(targetElem){targetElem.select();}}}
                    else {
                        //move right
                       if(!(cellIndex == (numElements -1))){
                            targetElem = currRow.children("td").eq(cellIndex+1).find("input[type=text]");                        
                            if(targetElem){
                                targetElem.select();
                            }
                        }
                    }                         
                    return false;                          
                case 16: //shift key
                    shiftKeyPressed = 1;
                    return false;
                case 33:                    
                case 34: //page-up, page-down
                    if(event.keyCode == 33){
                        nextRowIndex = rowIndex - pageSize;
                        if(nextRowIndex < 0) nextRowIndex = 0;                
                    }
                    if(event.keyCode == 34){
                        nextRowIndex = rowIndex + pageSize;
                        if(nextRowIndex > numRows) nextRowIndex = numRows;
                    }                      
                    targetElem = currRow.parent().children("tr").eq(nextRowIndex).children("td").eq(cellIndex)
                                    .find("input[type=text]");                                                                
                    if(targetElem != null){targetElem.select();}
                    return false;                   
                case 37: //left       
                    if(!(cellIndex == 0)){                        
                        targetElem = currRow.children("td").eq(cellIndex-1).find("input[type=text]");
                        if(targetElem != null){targetElem.select();}}
                    return false;                                                
                case 38: //up                    
                    if(rowIndex != 0){
                        targetElem = currRow.parent().children("tr").eq(rowIndex-1).children("td").eq(cellIndex)
                                        .find("input[type=text]");                                                                
                        if(targetElem != null){
                        targetElem.select();}}
                    return false;                                                
                case 39: //right arrow
                    if(!(cellIndex == (numElements -1))){
                        targetElem = currRow.children("td").eq(cellIndex+1).find("input[type=text]");                        
                        if(targetElem != null){targetElem.select();}}
                    return false;                                                
                case 40: //down                                               
                    if(rowIndex >= 0){
                        targetElem = currRow.parent().children("tr").eq(rowIndex+1).children("td").eq(cellIndex)
                                        .find("input[type=text]");                                                                
                        if(targetElem != null){targetElem.select();}}
                    return false;                                                                                                        
            }            
        }
4

1 回答 1

1

首先，在您进入 switch 语句并确定您是否真的需要做任何事情之前，您已经为每次按键运行了代码。

您需要将该代码分解为仅获取 TD 的函数（作为简单的元素变量而不是 Jquery 包装器）。

最重要的是，您必须了解 JQuery 抽象浏览器之间的差异会带来价格和性能。例如，当绑定事件触发时，在调用实际事件函数之前，该事件需要运行适量的 Javascript。

您对 currRow.children("td").eq(cellIndex+1).find("input[type=text]"); 的使用 不会特别好。您可以通过在 td 上指定高度来消除额外的 div。然后假设 td 只包含这样的输入。

var tdNext = td.nextSibling;
var textBox =  tdNext ? tdNext.firstChild : null;
if (textBox) $(textBox).select();

教训是有时您需要为了性能而规避 JQueries 的优势。上面的代码在多个浏览器之间仍然非常兼容。

您可以将类似的技术应用于其他主键左、上、下和输入。

您是否有理由不使用 event.shiftKey 来检测 shift 键？使用看起来像的全局变量似乎并不合理。

于 2009-01-12T22:56:08.327 回答