Home / Questions / 126670
Accepted
ByGroxD
Asked: 2020-12-23 10:24:10 +0800 CST 2020-12-23 10:24:10 +0800 CST

从数据表发送复选框值

  • 772

我在将inputin 状态的值发送checked到我的控制器时遇到问题，不幸的是，它只向我发送了我当时所在页面的值，而不是我选择 a 的所有页面的值checkbox，我的意思是paginas 是因为我使用的是datatables.

我的代码如下：

<div class="container">
        <h2>Ventas</h2>
        <form action="venta.php" method="POST">
            <table id="inventario" class="table table-hover table-bordered table-condensed">
                <thead>
                    <tr>
                        <th><i class="fa fa-check"></i>&nbsp;Selección articulo</th>
                        <th><i class="fa fa-list-ol"></i>&nbsp;Cantidad</th>
                        <th><i class="fa fa-building"></i>&nbsp;Marca</th>
                        <th><i class="fa fa-list"></i>&nbsp;Categoria</th>
                        <th><i class="fa fa-usd"></i>&nbsp;Precio</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($articulos as $articulo): ?>
                    <tr>
                        <td><label class="checkbox-inline"><input name="articulos[]" type="checkbox" value="<?php echo $articulo['id']; ?>"><?php echo $articulo['nombre']; ?></label></td>
                        <td><?php echo $articulo['cantidad']; ?></td>
                        <td><?php echo $articulo['categoria']; ?></td>
                        <td><?php echo $articulo['marca']; ?></td>
                        <td><?php echo number_format($articulo['precio_u']); ?></td>
                    </tr>
                    <?php endforeach ?>
                </tbody>
            </table>
            <input type="submit" class="btn btn-warning" name="vender" value="Vender">
        </form>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#inventario').DataTable();
                var dataArr = [];
                 $('tr').filter(':has(:checkbox:checked)').each(function() {      
                      dataArr.push($(this).find('input').eq(0).val());
                        console.log(dataArr);
                 });
        } );
    </script>

正如你们中的一些人所看到的，我尝试制作一个脚本来收集所有值并能够将它们发送到我的控制器，但是我做不到，我对 JS 不是很好。

我发现有人为这个问题制作了这个片段，但是我不知道如何补充它。

var rows = $(('#datatable')
   .rows({ 'search': 'applied' })
   .nodes()).filter(':has(:checkbox:checked)');//busca todos los registros del datatable

rows.each(function(index,elem){
   //cada row es un tr
     console.log($('datatable').row(elem).data());
});

如果需要使用ajax发送选中复选框的所有值，我没有问题。

php

2 Answers

  1. Best Answer

    承诺是债务，解决同样的问题如下：

    首先从表中删除类型为 checkbox 的输入，只留下空的 td：

    <form action="venta.php" method="post" id="form">
    <table id="inventario" class="table table-hover table-bordered table-condensed">
        <thead>
            <tr>
                <th><i class="fa fa-check"></i>&nbsp;Selección articulo</th>
                <th><i class="fa fa-list-ol"></i>&nbsp;Cantidad</th>
                <th><i class="fa fa-building"></i>&nbsp;Marca</th>
                <th><i class="fa fa-list"></i>&nbsp;Categoria</th>
                <th><i class="fa fa-usd"></i>&nbsp;Precio</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($articulos as $articulo): ?>
            <tr>
                <td></td>
                <td><?php echo $articulo['cantidad']; ?></td>
                <td><?php echo $articulo['categoria']; ?></td>
                <td><?php echo $articulo['marca']; ?></td>
                <td><?php echo number_format($articulo['precio_u']); ?></td>
            </tr>
            <?php endforeach ?>
        </tbody>
    </table>
    <input type="button" class="btn btn-warning" name="vender" value="Vender" id="vender">
</form>

    添加数据表选择库绑定：

    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

    要使用该库，我们按如下方式进行，在这种情况下，在每行的第一个 td 上。

    var table = $('#inventario').DataTable( {
    columnDefs: [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
    select: {
        style:    'multi', //'os' para seleccion unica 
        selector: 'td:first-child'
    }
});

    此时，我们应该已经在第一列中看到了复选框输入，并且我们应该能够选择它们。

    然后要获取选定的元素，我们可以这样做：

    首先，您可以将 id=form 放入表单以便能够识别它，您可以将 type="button" 放入按钮以便它不会自动提交，并且 id="sell" 以便稍后捕获点击事件（在html 上面的这些更改已经应用）。

    然后，您可以通过单击“出售”按钮捕获选择的项目，将它们添加到表单中，输入 type="hidden" 以及这些项目的 id，然后提交表单。

    $('#vender').on('click', function (event) {
  event.preventDefault();
  
  $('#form').find('input[type="hidden"]').remove();
  var seleccionados = table.rows({ selected: true });
  
  if(!seleccionados.data().length)
    alert("No ha seleccionado ningún producto");
  else{
    seleccionados.every(function(key,data){
      console.log(this.data());

      $('<input>', {
          type: 'hidden',
          value: this.data()[1],
          name: 'ids[]'
      }).appendTo('#form');
      
      //$("#form").submit(); //submiteas el form
    });
  }
});

    编辑

    在代码中添加了注释以区分多选和单选，更新了库的版本并添加了一个工作示例。

    这是一个工作示例：

    $(document).ready(function() {
    var table = $('#inventario').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'multi', //'os' para seleccion unica 
            selector: 'td:first-child'
        },
        lengthMenu: [[1, 2, 3, -1], [1, 2, 3, "All"]]
    });
    
    $('#vender').on('click', function (event) {
      event.preventDefault();
      
      $('#form').find('input[type="hidden"]').remove();
      var seleccionados = table.rows({ selected: true });
      
      if(!seleccionados.data().length)
        alert("No ha seleccionado ningún producto");
      else{
        seleccionados.every(function(key,data){
          console.log(this.data());

          $('<input>', {
              type: 'hidden',
              value: this.data()[1],
              name: 'ids[]'
          }).appendTo('#form');
          
          //$("#form").submit(); //submiteas el form
        });
      }
  });
} );
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<form action="#" method="post" id="form">
    <table id="inventario" class="table table-hover table-bordered table-condensed">
        <thead>
            <tr>
                <th><i class="fa fa-check"></i>&nbsp;Selección articulo</th>
                <th><i class="fa fa-list-ol"></i>&nbsp;Cantidad</th>
                <th><i class="fa fa-building"></i>&nbsp;Marca</th>
                <th><i class="fa fa-list"></i>&nbsp;Categoria</th>
                <th><i class="fa fa-usd"></i>&nbsp;Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Mi9</td>
                <td>1</td>
                <td>Xiaomi</td>
                <td>Celular</td>
            </tr>
            <tr>
                <td></td>
                <td>S1</td>
                <td>1</td>
                <td>Samsung</td>
                <td>Celular</td>
            </tr>
            <tr>
                <td></td>
                <td>S2</td>
                <td>1</td>
                <td>Samsung</td>
                <td>Celular</td>
            </tr>
            <tr>
                <td></td>
                <td>S3</td>
                <td>1</td>
                <td>Samsung</td>
                <td>Celular</td>
            </tr>
        </tbody>
    </table>
    <input type="button" class="btn btn-warning" name="vender" value="Vender" id="vender">
</form>

    • 0

    • 这对我来说有点简单......在获得选定的复选框之前，我们必须撤消数据表格式。在将保存选定复选框的 javascript 函数中，执行以下操作：

      • 撤消表格格式（暂时）--> $('#tbl').dataTable().fnDestroy();
      • 使用选中的 javascript 复选框获取（现在所有复选框都会出现）
      • 再次格式化，以便用户不会注意到更改 $('#tbl').DataTable({"ordering": true, etc...

      问候。

    • 0