Question

我已经使用bs-tables按复选框传递所选行但现在我需要在选择一个复选框时发送所有数据。下面是我用来传递单行和多行数据的代码。如何传递数据通过仅选择单个复选框来显示所有行。

<table id="eventsTable" data-toggle="table" data-pagination="true" data-search="true" data-toolbar="#toolbar">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="adate" data-align="center">Date</th>
            <th data-field="dc_no">DC. No.</th>
            <th data-field="customer_name" data-align="center">Customer Name</th>
            <th data-field="details" data-align="center">Description</th>
            <th data-field="plate_size" data-align="">Size</th>
            <th data-field="set" data-align="">Set</th>
            <th data-field="color" data-align="">Color</th>
            <th data-field="quantity" data-align="">Quantity</th>
            <th data-field="rate" data-align="">Rate</th>
            <th data-field="amount" data-align="">Total Amount</th>
        </tr>
    </thead>

    <tbody>
        <tr>
        <?php foreach ($bill as $object) { ?>
            <td><!-- <input type="checkbox"> --></td>
        <td width="110px"><?php $date = $object['adate']; $newDate = date('d-m-Y', strtotime($date)); echo $newDate;?></td>
            <td><?php echo $object['id'];?></td>
            <td width="18%"><?php echo $object['customer_name'];?></td>
            <td width="25%"><?php echo $object['details'];?></td>
            <td width="6%"><?php echo $object['plate_size'];?></td>
            <td><?php echo $object['plate_set'];?></td>
        <td><?php echo $object['color'];?></td>
            <td width="6%"><?php echo $object['quantity'];?></td>
            <td><?php echo $object['rate'];?></td>
            <td><?php echo $object['amount'];?></td>
        </tr>
        <?php } ?>  
    </tbody>


</table>
<div class="container text-center">
    <button id="add_cart" class="btn btn-primary btn-lg">Save</button>
    <ul id="output"></ul>
  </div>

<script type="text/javascript">
    var checkedRows = [];

    $('#eventsTable').on('check-all.bs.table', function (e, row) {
            $.checkedRows(checkedRows, function(index, value) {
            row.id.push({dc_no: row.dc_no, name: row.customer_name, adate: row.adate, plate_size: row.plate_size, set: row.set, color:row.color, qty: row.quantity, rate: row.rate, amount: row.amount, details: row.details});
            window.alert(checkedRows);
            // console.log(checkedRows);
        });
      });

    $('#eventsTable').on('check.bs.table', function (e, row) {
      checkedRows.push({dc_no: row.dc_no, name: row.customer_name, adate: row.adate, plate_size: row.plate_size, set: row.set, color:row.color, qty: row.quantity, rate: row.rate, amount: row.amount, details: row.details});
      console.log(checkedRows);
      });

    $('#eventsTable').on('uncheck.bs.table', function (e, row) {
      $.each(checkedRows, function(index, value) {
      if (value.id === row.id) {
          checkedRows.splice(index,1);
        }
      });
    console.log(checkedRows);
  });
     var myRedirect = function(redirectUrl, value1, value2, value3, value4, value5, value6, value7, value8, value9, value10) {
      var form = $('<form action="' + redirectUrl + '" method="post">' +
        '<input type="hidden" name="dc_no" value=" ' + value1 +'" />' +
        '<input type="hidden" name="customer_name" value=" ' + value2 +'" />' +
        '<input type="hidden" name="adate" value=" ' + value3 +'" />' +
        '<input type="hidden" name="plate_size" value=" ' + value4 +'" />' +
        '<input type="hidden" name="set" value=" ' + value5 +'" />' +
        '<input type="hidden" name="quantity" value=" ' + value6 +'" />' +
        '<input type="hidden" name="rate" value=" ' + value7 +'" />' +
        '<input type="hidden" name="amount" value=" ' + value8 +'" />' +
        '<input type="hidden" name="details" value=" ' + value9 +'" />' +
        '<input type="hidden" name="color" value=" ' + value10 +'" />' +

        // '<input type="hidden" name="name" value="value.name" />' +
        '</form>');
        $('body').append(form);
        $(form).submit();
      };
    // $("#add_cart").click(function() {
    //     window.alert(JSON.stringify(checkedRows));
    // });

    $("#add_cart").click(function() {
    $("#output").empty();
    var dc = [];
    var custo = [];
    var ada = [];
    var ps = [];
    var set = [];
    var qty = [];
    var rate = [];
    var amnt = [];
    var details = [];
    var color = [];
    $.each(checkedRows, function(index, value) {
      // myRedirect("some", value.dc_no);
      var one = {dc_no: (value.dc_no)};
      var two = {customer_name: (value.name)};
      var three = {adate: (value.adate)};
      var four = {plate_size: (value.plate_size)};
      var five = {set: (value.set)};
      var six = {quantity: (value.qty)};
      var seven = {rate: (value.rate)};
      var eight = {amount: (value.amount)};
      var nine = {details: (value.details)};
      var ten = {color: (value.color)};
      // {dc_no: value.dc_no}
      var some1 = $.map(one, function(el) { return el;})
      dc.push(some1);

      var some2 = $.map(two, function(el) { return el;})
      custo.push(some2);

       var some3 = $.map(three, function(el) { return el;})
      ada.push(some3);

      var some4 = $.map(four, function(el) { return el;})
      ps.push(some4);

       var some5 = $.map(five, function(el) { return el;})
      set.push(some5);

      var some6 = $.map(six, function(el) { return el;})
      qty.push(some6);

       var some7 = $.map(seven, function(el) { return el;})
      rate.push(some7);

      var some8 = $.map(eight, function(el) { return el;})
      amnt.push(some8);

      var some9 = $.map(nine, function(el) { return el;})
      details.push(some9);

      var some10 = $.map(ten, function(el) { return el;})
      color.push(some10);
      // $('#output').append($('<li></li>').text(value.dc_no + " | " + value.name ));
    });

    // dc = $.toJSON(dc);
    var som1 = $.map(dc, function(el) { return el;})
    window.alert(som1);

    var som2 = $.map(custo, function(el) { return el;})
    window.alert(som2);

    var som3 = $.map(ada, function(el) { return el;})
    window.alert(som3);

    var som4 = $.map(ps, function(el) { return el;})
    window.alert(som4);

    var som5 = $.map(set, function(el) { return el;})
    window.alert(som5);

    var som6 = $.map(qty, function(el) { return el;})
    window.alert(som6);

    var som7 = $.map(rate, function(el) { return el;})
    window.alert(som7);

    var som8 = $.map(amnt, function(el) { return el;})
    window.alert(som8);

    var som9 = $.map(details, function(el) { return el;})
    window.alert(som9);

    var som10 = $.map(color, function(el) { return el;})
    window.alert(som10);



    // for (var i = 0; i < 3; i++) {
       //  var some = $.map(dc, function(el) { return el;})
       //  window.alert((some));
       myRedirect("some1",som1, som2, som3, som4, som5, som6, som7, som8, som9, som10);
    // }

    // myRedirect("some", value.dc_no);
  });


    </script>

Answer 1

您需要在BS表API中找到select all事件。例如：

$('#eventsTable').on('all.bs.table', function (e, name, args) {
    console.log('Event:', name, ', data:', args);
})

完整的例子可以在这里找到： JSFiddle link

有关此方面的更多信息，您需要参考BS表的API文档。

使用bs-table选中所有复选框，使用1复选框

1 个答案: