选择使用使用1个复选框，所有复选框BS-表

Question

我用BS-表通过复选框通过选择行，但现在我需要发送的所有数据，当我选择一个checkbox.Below是我的代码，我有使用来传递数据单行和多行通过仅选择单个复选框来传递所有行的数据。

<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文档。