Повышение производительности навигации по таблицам в jquery
Я пытаюсь написать табличную навигацию с помощью клавиш для 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;
}
}
Ответы 1
Прежде всего, у вас есть код, запускаемый для каждого нажатия клавиши, прежде чем вы перейдете к оператору switch и определите, действительно ли вам нужно что-либо делать.
Вам нужно преобразовать этот код в функцию, которая просто получает TD (как простую переменную элемента, а не оболочку JQuery).
Кроме того, вы должны понимать, что JQuery, абстрагирующий различия между браузерами, имеет цену и производительность. Например, когда срабатывает связанное событие, у события есть умеренный кусок Javascript, который нужно пройти до того, как будет вызвана ваша фактическая функция события.
Вы используете currRow.children ("td"). Eq (cellIndex + 1) .find ("input [type = text]"); не будет особенно отличным. Вы можете удалить лишний div, указав высоту на td. Тогда предполагая, что td содержит только такой ввод.
var tdNext = td.nextSibling;
var textBox = tdNext ? tdNext.firstChild : null;
if (textBox) $(textBox).select();
Урок состоит в том, что иногда вам нужно обойти преимущества JQueries ради производительности. Приведенный выше код по-прежнему очень совместим с несколькими браузерами.
Вы можете применить аналогичные методы к другим основным клавишам влево, вверх, вниз и Enter.
Есть ли причина, по которой вы не используете event.shiftKey для обнаружения клавиши Shift? Использование глобальной переменной в том виде, в каком вы ее видите, не кажется разумным.