сортировка по jquery.ui с использованием таблицы и элемента: tr, трудности с заполнителями - PullRequest
Новая
       25

сортировка по jquery.ui с использованием таблицы и элемента: tr, трудности с заполнителями

7 голосов
/ 27 марта 2010

Я бы хотел добавить поддержку сортировки в созданные мной таблицы.

Заполнитель, который я реализовал, вообще не работает в IE 7 при использовании item: TR. Работает нормально в ФФ.
Я пробовал код на <UL\>, и он работает правильно. Это похоже на таблицы и

Я исследовал форумы, и похоже, что не так много людей используют сортировку по таблицам: 

<style type="text/css">
  .dndPlaceHolder 
  {
    background-color:Red ;
    color:Red;
    height: 20px; 
    line-height:30px;
    border: solid 2px black;
  }    
  .dndItem
  {
    background-color: #c0c0c0;
    border:solid 1px black;
    padding:5px; 
  }
</style>

<script type="text/javascript" >
  $(function() {
    $("#myTable").sortable(
    {
      placeholder:'dndPlaceHolder',
      distance:15,
      items:'tr', 
      forcePlaceholderSize:true, 
      change : dndChange,
      update : dndUpdate
    });

    $("#myTable").disableSelection();

    $("#myList").sortable(
    {
      placeholder:'dndPlaceHolder',
      distance:15,
      items:'li', 
      forcePlaceholderSize:true, 
      change : dndChange,
      update : dndUpdate
    });

    $("#myList").disableSelection();

  });

  function dndChange(event,ui){

  }

  function dndUpdate(event,ui){
    var msg = '';
  }       
</script>

<table id='myTable' >
   <tr class='dndItem' id='1'>
      <td>0 Active - Active</td>
   </tr>
   <tr class='dndItem' id='2'>
      <td>1 Closed - Closed</td>
   </tr>
   <tr class='dndItem' id='3'>
      <td>2 OnHold - On Hold</td>
   </tr>
   <tr class='dndItem' id='4'>
      <td>3 Pending - Pending</td>
   </tr>
</table>
<BR>
<UL id='myList' >
  <li class='dndItem' id='1'>0 Active - Active</li>
  <li class='dndItem' id='2'>1 Closed - Closed</li>
  <li class='dndItem' id='3'>2 OnHold - On Hold</li>
  <li class='dndItem' id='4'>3 Pending - Pending</li>
</ul>

Можете ли вы помочь мне с моими требованиями, используя предоставленный мною код, или направить меня к руководству, демонстрирующему, как это делается?

1 Ответ

19 голосов
/ 11 июня 2010

Попробуйте это: 

$("#myTable").sortable({
    ...
    'start': function (event, ui) {
        ui.placeholder.html('<!--[if IE]><td>&nbsp;</td><![endif]-->');
    },
    ...
};
...