1

Olá,

Esse código faz o seguinte, quando o checkbox é selecionado, a linha da tabela é adicionada na tabela de baixo.

Se eu criar o input.checkbox na mão o código funciona mas não salva o seu status quando se usa a paginação, usando o checkbox gerado pelo bootstrap-table ele salva o status ao usar a paginação porem o meu javascript não encontra o checkbox.

Aqui o fiddle: https://jsfiddle.net/zc2v3yg3/

Aqui o código:

Obs.: Tem que importar o bootstrap, bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/) e jquery

HTML:

<table id="pieces" data-toggle="table" data-page-size="2" data-page-list="[2,5,10,20,40,80,100]" data-pagination="true" data-id-field="id" data-click-to-select="true" data-maintain-selected="true">
  <thead>
    <tr>
      <th data-filed="select"   data-checkbox="true"></th>
      <th data-filed="id"       data-sortable="true">#</th>
      <th data-field="kind"     data-sortable="true" data-filter-control="select">Tipo</th>
      <th data-field="group"    data-sortable="true" data-filter-control="select">Grupo</th>
      <th data-field="gender"   data-sortable="true" data-filter-control="select">Gênero</th>
      <th data-field="size"     data-sortable="true" data-filter-control="select">Tamanho</th>
      <th data-field="color"    data-sortable="true" data-filter-control="select">Cor</th>
      <th data-field="used"     data-sortable="true" data-filter-control="select">Usado</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td id="select"></td>
      <td>0001</td>
      <td>Camisa</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
    <tr id="2">
      <td id="select"></td>
      <td>0002</td>
      <td>Calça</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
    <tr id="3">
      <td id="select"></td>
      <td>0003</td>
      <td>Cinto</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
    <tr id="4">
      <td id="select"></td>
      <td>0004</td>
      <td>Sapato</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
  </tbody>
</table>
<hr>
<table id="piecesToEmployer" class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Tipo</th>
      <th>Grupo</th>
      <th>Gênero</th>
      <th>Tamanho</th>
      <th>Cor</th>
      <th>Usado</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JS:

$(document).ready(function(){
  $(document).on('change', '#pieces tbody tr td input.checkbox', function (e) {
    if($(this).is(':checked')){
      var row = $(this).closest('tr').clone();
      console.log(row);
      $('#piecesToEmployer tbody').append(row);
      $('#piecesToEmployer tbody #select').remove();
    } else {
      var rmRow = $(this).closest('tr').attr('id');
      console.log(rmRow);
      $('#piecesToEmployer #'+rmRow).remove();
    }
  });
});
3
  • Cara, pra salvar, você tem que enviar uma requisição ajax via $.post() Commented 5/10/2015 às 21:21
  • Obs: Tem um erro de grafia na palavra ou está em espanhol mesmo? "Primeiro" => "Primieiro" Commented 5/10/2015 às 21:24
  • erro de grafia mesmo... Commented 5/10/2015 às 22:47

1 Resposta 1

1

Use as próprias funções da bootstrap-table para pegar evento de onCheck() e onUncheck(), desta forma ira funcionar normalmente com a paginação. Ai é só fazer seu ajax para salvar seu status. Veja o fiddle!

Primeiro pego o evento de onCheck:

$('#pieces').on('check.bs.table', function (row, event, element) {
    var row = $(element).closest('tr').clone();
    $('#piecesToEmployer tbody').append(row);
    $('#piecesToEmployer tbody #select').remove();

    //aqui você chama seu ajax para salvar
});

Depois pega o evento de unCheck:

$('#pieces').on('uncheck.bs.table', function (row, event, element) {
    var rmRow = $(element).closest('tr').attr('id');
    $('#piecesToEmployer #' + rmRow).remove();

    //aqui você chama seu ajax para remover
});
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .