Question

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

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

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

Answer 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键？你看起来似乎没有使用全局变量。

在jquery中提高表导航的性能

1 个答案: