Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

chamuska

Jquery sortable, como pegar id da tag TD ?

Recommended Posts

Pessoal, sou bem amador em plugins js, mas estou tendo que usar um plugin para fazer sortable das tds das tabelas e não sei como pegar o id da td.

 

Estou usando esse plugin: http://johnny.github.io/jquery-sortable/

 

O código que peguei para exemplo é esse:

 


  <div class="span4">
    <h3>Sortable Rows</h3>
    <table class="table table-striped table-bordered sorted_table">
      <thead>
        
      </thead>
      <tbody>
        <tr class="">
          <th>A Column</th>
          <th>B Column</th>
        </tr><tr>
            <td id="123">A Item 1</td>
            <td>B Item 1</td>
          </tr>
          <tr>
            <td>A Item 2</td>
            <td>B Item 2</td>
          </tr>
          <tr>
            <td>A Item 3</td>
            <td>B Item 3</td>
          </tr>
          <tr>
            <td>A Item 4</td>
            <td>B Item 4</td>
          </tr>
          <tr>
            <td>A Item 5</td>
            <td>B Item 5</td>
          </tr>
          <tr>
            <td>A Item 6</td>
            <td>B Item 6</td>
          </tr>
      </tbody>
    </table>
  </div>
  <div class="span4">
    <h3>Sortable column heads</h3>
    <table class="table table-striped table-bordered">
      <thead class="sorted_head">
        <tr>
          <th>A Column</th>
          <th>B Column</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>A Item 1</td>
            <td>B Item 1</td>
          </tr>
          <tr>
            <td>A Item 2</td>
            <td>B Item 2</td>
          </tr>
          <tr>
            <td>A Item 3</td>
            <td>B Item 3</td>
          </tr>
          <tr>
            <td>A Item 4</td>
            <td>B Item 4</td>
          </tr>
          <tr>
            <td>A Item 5</td>
            <td>B Item 5</td>
          </tr>
          <tr>
            <td>A Item 6</td>
            <td>B Item 6</td>
          </tr>
      </tbody>
    </table>
  </div>
</div>

<script>

$(function () {
  // Sortable rows
  $('.sorted_table').sortable({
    containerSelector: 'table',
    itemPath: '> tbody',
    itemSelector: 'tr',
    placeholder: '<tr class="placeholder"/>'
  })

  // Sortable column heads
  var oldIndex
  $('.sorted_head tr').sortable({
    containerSelector: 'tr',
    itemSelector: 'th',
    placeholder: '<th class="placeholder"/>',
    vertical: false,
    onDragStart: function (item, group, _super) {
      oldIndex = item.index()
      item.appendTo(item.parent())
      _super(item)
    },
    onDrop: function  (item, container, _super) {
      var field,
      newIndex = item.index()
      
      if(newIndex != oldIndex)
        item.closest('table').find('tbody tr').each(function (i, row) {
          row = $(row)
          field = row.children().eq(oldIndex)
          if(newIndex)
            field.before(row.children()[newIndex])
          else
            row.prepend(field)
        })

      _super(item)
    }
  })
})
</script>

Imagino que seja no 'onDrop', mas não faço ideia de como pegar o id.

 

Coloquei id no primeiro TD da tabela, esta com id 123, como posso pegar o valor??

 

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

assim..

 

aqui você define o que se arrasta

itemSelector: 'tr',

O ID está atribuído em um TD não no TR

<tr>
   <td id="123">A Item 1</td>
   <td>B Item 1</td>
</tr>

para pegar o ID primeiro terá de encontrar o TD

$item.find('td').stop().attr('id')

resultado...

onDrop: function  ($item, container, _super) {

continuação do código...

    alert( $item.find('td').stop().attr('id') ); // <- exibe o ID do item arrastado
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.