JQuery / Javascript Изменение порядка строк - PullRequest
Новая
       9

JQuery / Javascript Изменение порядка строк

8 голосов
/ 02 марта 2009

У меня есть страница aspx, которая выглядит примерно так: 

<tr id="Row1">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>

Как только страница будет загружена, я захочу изменить порядок этих строк на основе ранее выбранного порядка пользователя (сохраненного в базе данных)

Как бы я использовал JQuery / JS для этого?

EDIT:

Я столкнулся с проблемой производительности с кодом приложения. Для таблицы из 10 строк требуется 400 мс, что на самом деле недопустимо. Может ли кто-нибудь помочь мне настроить его для производительности? 

function RearrangeTable(csvOrder, tableId)
{
  var arrCSVOrder = csvOrder.split(','); 

  //No need to rearrange if array length is 1
  if (arrCSVOrder.length > 1)
  {
    for (var i = 0; i < arrCSVOrder.length; i++)
    {
      $('#' + tableId).find('[fieldname = ' + arrCSVOrder[i] + ']').eq(0).parents('tr').eq(0).appendTo('#' + tableId);
    }
  }
}

Ответы [ 8 ]

10 голосов
/ 02 марта 2009

Попробуйте плагин jQuery TableSorter .

Когда документ загружается, вы можете отсортировать таблицу, указав индекс столбца для сортировки (и это позволяет сортировать по нескольким столбцам): 

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);
10 голосов
/ 02 марта 2009

Почему бы не упорядочить строки на стороне сервера? Если вы собираетесь переупорядочить их с помощью JQuery, как только страница загрузится, тогда будет более эффективно выполнять эту работу в коде сервера, особенно если выбранный заказ пользователя сохраняется в базе данных.

8 голосов
/ 06 марта 2009

Просто сделайте что-то вроде этого:

Скажем, у вас есть таблица, например: 

<table id='table'>
    <tr id='row1'><td> .... </td></tr>
    <tr id='row2'><td> .... </td></tr>
    <tr id='row3'><td> .... </td></tr>
    <tr id='row4'><td> .... </td></tr>
</table>

И массив с новым порядком: 

NewOrder[1] = 3;
NewOrder[2] = 4;
NewOrder[3] = 2;

Затем сделайте что-то подобное (не проверено, поэтому вам может понадобиться настроить код, но это идея): 

for ( i=1; i<=NewOrder.length; i++ ) {
    $('#row'+i).appendTo( '#table' );
}

Таким образом, они перемещаются в конец таблицы по порядку.

Таким образом, у вас будет 3 перемещенных в конец, затем 4 за ним, затем 2 за ним и т. Д. После того, как к концу таблицы добавлено ALL , первый из них станет первый ряд, а остальные будут в правильном порядке за ним.

Edit:

Сделать стиль таблицы = 'display: none;' а затем выполните $ ('# table'). show (); при запуске.

Редактировать еще раз: Вы можете сделать div для всего содержимого тела, например 

<body>
<div id='everything' style='display:none;'>
....
</div>
</body>

Так что вся страница будет скрыта (только пустой белый) за долю секунды, которая требуется для загрузки и упорядочения таблицы.

Тогда вы будете использовать: 

$(function(){
    $('#everything').show();
}

Показать всю страницу сразу, как только DOM будет готов. Загрузка страницы займет доли секунды, но все загружается сразу, поэтому не будет никаких пропущенных таблиц и т. Д. Пока ВСЕ находится в #everything, оно будет выглядеть просто как и загруженная страница - должна быть прозрачной для зрителя.

3 голосов
/ 09 марта 2009

Имейте в виду, что исправление на стороне клиента оставляет вас открытыми для проблем тремя способами.

  1. Если клиентский компьютер работает медленно, это изменение порядка может быть видно независимо от того, что вы делаете.
  2. Чем больше будет таблица данных, тем медленнее будет это действие и тем более заметным будет изменение порядка.
  3. В клиенте может быть отключен JS, что нарушит ваш порядок.

Хотя кажется, что вы хотите сделать это на стороне клиента, чтобы избавить себя от головной боли при программировании на стороне сервера, в конечном счете, потратив некоторое время на это сейчас, чтобы получить его на стороне сервера, вы избежите этих проблем. *

Если у вас возникли проблемы с настройкой серверного кода для правильной работы с пользовательскими элементами управления, опубликуйте его, и мы поможем вам.

3 голосов
/ 02 марта 2009

Проверьте плагин jQuery TableSorter , он очень мощный, он определяет основные типы данных столбцов, и вы можете программно сортировать столбцы таблицы: 

$("#yourTable").tablesorter( {sortList: [[0,0]]} );  
// This will sort "yourTable" using 
// the first column, ascending [columnIndex, 0=ASC or 1 = DESC]
1 голос
/ 13 марта 2009

Рабочий пример. Просто переберите список, содержащий новый порядок (который, предположительно, вы читаете из БД), и создайте новую таблицу. Затем установите таблицу html () для новой таблицы html. 

<html>
<head>
    <script type="text/javascript"
    src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
jQuery.fn.outer = function(){
  return $( $('<div></div>').html(this.clone()) ).html();
}
$(function(){
    newtbl = "";
    neworder = [2,3,1];
    for(i=0;i<neworder.length;i++){
        newtbl += $("#Row"+neworder[i]).outer();
    }
    $("#tbl").html("<table id=\"tbl\">" + newtbl + "</table>")
});
</script>       
</head>
<body>
<table id="tbl">
<tr id="Row1">
  <td>label 1</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>label 2</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>label 3</td>
  <td>Some complex control</td>
</tr>
</table>
</body>
</html>
0 голосов
/ 13 марта 2009

РЕДАКТИРОВАТЬ метод appendTo работает. Однако в небольшой задержке переупорядочения строк на стороне клиента я вижу строки в их первоначальном порядке в течение примерно половины секунды, прежде чем переупорядочение завершено. Такое поведение пользовательского интерфейса является более заметным, поскольку на странице не используются обратные передачи. Любой обходной путь для этого?

Установить отображение: нет на столе с помощью css. Когда происходит событие готовности документа, используйте метод appendTo. Это шоу на столе. Вы можете установить другой тег стиля с помощью display: block на столе внутри <noscript>, если js отключен.

0 голосов
/ 02 марта 2009

Если последняя сортировка, выполненная пользователем, сохраняется в виде списка, содержащего идентификатор строки, вы можете сделать это: 

loop through list from db {
    $("#"+rowId).appendTo("#tableId")
}

Таким образом, строки будут извлечены из их текущего местоположения и заменены внутри таблицы в порядке их сохранения в базе данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...