Меню
Что нового?

Нужна jQuery либа для сортировки элементов таблицы

mstdmstd

Новичок
Всем привет,
Примеры списков с сортировкой перетягиванием элементов списка обычно сделаны с использованием тегов "<UL>", "<LI>"
вроде http://jqueryui.com/demos/sortable/
Мне нужно сделать сортировку перетягиванием элементов списка для Gantt chart control-а http://www.jsgantt.com/
Верстка этого Gantt-а сделана с использованием таблиц. Нет ли каких jquery библиотек с сортировкой для таблиц чтобы не не
переделывать верстку Gantt контрола? Уж больно она там заковыристая...
 

mstdmstd

Новичок
Порывшись в нете я нашел пример sortable с табличной версткой
http://stackoverflow.com/questions/4471520/jquery-ui-sortable-table-handle

Прикрутил этот пример к своей странице(чтобы убедиться что все файлы подключены правильно) :

PHP: 
  $("#table_sortable tbody").sortable(  {      handle: 'td:first'    }  ).disableSelection();
PHP: 
<table id="table_sortable">
    <tr>
        <td>1A&nbsp;&nbsp;</td>
        <td>1B&nbsp;&nbsp;</td>
        <td>1C&nbsp;&nbsp;</td>
    </tr>
    <tr>
        <td>2A&nbsp;&nbsp;</td>
        <td>2B&nbsp;&nbsp;</td>
        <td>2C&nbsp;&nbsp;</td>
    </tr>
    ...
    <tr>
        <td>6A&nbsp;&nbsp;</td>
        <td>6B&nbsp;&nbsp;</td>
        <td>6C&nbsp;&nbsp;</td>
    </tr>
</table>
Если потащить мышом за первую ячейку - то вся строка нормально тянется и ложится на новое место - то что мне и надо.

Попробовал применить этот пример к библиотеке ( jsgantt.com ) http://www.jsgantt.com/ :

там в коде формируется верстка таблицы одной переменной vLeftTable

Я заменил код заполнения этой переменной и получил примерно такую таблицу:

PHP: 
<table id="theLeftTable"> 
  <tbody>
    <tr>
      <td>
        Cell_8!&nbsp;&nbsp; 
      </td>
      <td>222</td>
      <td>333</td>
    </tr>
    <tr>
      <td>
        Cell_9!&nbsp;&nbsp;
      </td>
      <td>222</td>
      <td>333</td>
    </tr>
...
  </tbody>
</table>
И применив команду
PHP: 
  $("#theLeftTable tbody").sortable(  {      handle: 'td:first'    }  ).disableSelection();
Сортировка не работает В консоли ошибок нет Непонятно почему Или в коде верстки которая обвалакивает эту таблицу есть что-то такое что не дает работать сортировке ?
 
Semen

Semen

Семён
когда инициализируешь "sortable" для "theLeftTable" таблица уже отрисована?
PHP: 
alert ( $('#theLeftTable').html() );
$("#theLeftTable tbody").sortable(  {      handle: 'td:first'    }  ).disableSelection();
 

mstdmstd

Новичок
Спасибо, дело было как раз в этом!

И еще вопрос а можно ли некоторые строки таблицы исключить из списка сортируемых ?
Там вверху и внизу есть служебные строки - их можно вынести из из сортируемой таблицы - но если бы исключить эти из списка сортируемых - это было бы здорово.
Хотя тогда надо чтобы и остальные строки при сортировке не заезжали вверх верхних строк и ниже нижних строк . Возможно ли такое?
 

mstdmstd

Новичок
Тут я вижу только сл описание Items :

PHP: 
Specifies which items inside the element should be sortable.
Code examples

Initialize a sortable with the items option specified.

    $( ".selector" ).sortable({ items: 'li' });

Get or set the items option, after init.

    //getter
    var items = $( ".selector" ).sortable( "option", "items" );
    //setter
    $( ".selector" ).sortable( "option", "items", 'li' );
Можно указать какие tr с каким классом будут перетягиваться а какие нет?
Не нашел как это указать. ткните пожалуйста.
 
Semen

Semen

Семён
Код: 
<!DOCTYPE>

<html>
<head>
	<title>Test</title>
	<script src="/js/jquery.js" type="text/javascript"></script>
	<script src="/js/jquery-ui.min.js" type="text/javascript"></script>
	<style type="text/css">
	tr{
		width:400px;
	}
	.sortable{
		cursor:pointer;
	}
	</style>
</head>

<body>
<table width="400" border="1" cellspacing="5" cellpadding="5" id="itemsList">
	<tr><td>1.1</td><td>1.2</td></tr>
	<tr class="sortable"><td>2.1</td><td>2.2</td></tr>
	<tr class="sortable"><td>3.1</td><td>3.2</td></tr>
	<tr><td>4.1</td><td>4.2</td></tr>
</table>

<script>
$("#itemsList tbody").sortable({ items: ".sortable" })
</script>

</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Сверху