如何從網格獲取複選框事件？

Question

我怎麼能得到檢查行的餘額總額？

我無法獲得複選框的事件，然後獲得該行的列值。 請幫我一把。

Answer 1

我在jsbin上創建了一個原型，供您查看。這應該包含所有必要的組件來完成你所要求的。我假設Kendo UI網格有一個ID，所以你會想用我的網格ID替換我用過的選擇器。然而，這個概念本質上就是你要找的東西。

假設你有id爲myTable的一個網格，你將能夠做這樣的事情：

<table id="myTable"> 
    <thead> 
     <tr> 
      <th> 
       Select 
      </th> 
      <th> 
       Action 
      </th> 
      <th> 
       Action 
      </th> 
      <th> 
       Name 
      </th> 
      <th> 
       Unique ID 
      </th> 
      <th> 
       Format 
      </th> 
      <th> 
       Job # 
      </th> 
      <th> 
       Total Amount 
      </th> 
      <th> 
       Balance Amount 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <input type="checkbox" class="check" /> 
      </td> 
      <td> 
       <input type="button" value="Make Payment" /> 
      </td> 
      <td> 
       <input type="button" value="Change Details" /> 
      </td> 
      <td> 
       John Doe 
      </td> 
      <td> 
       12345 
      </td> 
      <td> 
       AIR CAN 
      </td> 
      <td> 
       Random Number 11122 
      </td> 
      <td> 
       1500 
      </td> 
      <td class="balance"> 
       2340 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" class="check" /> 
      </td> 
      <td> 
       <input type="button" value="Make Payment" /> 
      </td> 
      <td> 
       <input type="button" value="Change Details" /> 
      </td> 
      <td> 
       Jane Doe 
      </td> 
      <td> 
       56789 
      </td> 
      <td> 
       LCL CAN 
      </td> 
      <td> 
       Random Number 14562 
      </td> 
      <td> 
       1300 
      </td> 
      <td class="balance"> 
       1000 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" class="check" /> 
      </td> 
      <td> 
       <input type="button" value="Make Payment" /> 
      </td> 
      <td> 
       <input type="button" value="Change Details" /> 
      </td> 
      <td> 
       Jim Bob 
      </td> 
      <td> 
       82352 
      </td> 
      <td> 
       AIR CAN 
      </td> 
      <td> 
       Random Number 985613 
      </td> 
      <td> 
       600 
      </td> 
      <td class="balance"> 
       800 
      </td> 
     </tr> 
    </tbody> 
</table> 
<br /> 
<p id="total"> 
</p> 

你的JavaScript可能會是這個樣子：

$(document).ready(function(){ 
    //Store the totals here. 
    var totals = []; 
    //Handle checkbox click. 
    $('#myTable input:checkbox').on('click', function(){ 
     var sum = 0;//For adding the sum 
     //Get the cell with the balance in it. 
     var number = $(this).parentsUntil('tbody').find('.balance').text(); 
     //Handle if checked 
     if ($(this).is(':checked')){ 
      $(this).parentsUntil('tbody').addClass('highlight'); 
      totals.push(parseInt(number)); 
     }else{//Handle if not checked 
      $(this).parentsUntil('tbody').removeClass('highlight'); 
      var idx = totals.indexOf(parseInt(number)); 
      totals.splice(idx, 1); 
     } 
     for (var n = 0; n < totals.length; n++){ 
      sum += totals[n]; 
     } 
     $('#total').text(sum > 0 ? sum : ""); 
    }); 
}); 

請參閱澄清使用的原型以及代碼的現場演示。

希望這會有所幫助。 :)

Answer 2

我用了我的答案我自己

var grid = $("#amount_detail").data("kendoGrid"); 
      grid.tbody.on("change", ".ob-paid", function (e) { 
       var row = $(e.target).closest("tr"); 
       var item = grid.dataItem(row); 
       var balance_amount = item.balance_amount; 
       item.set("checkbox", $(e.target).is(":checked") ? 1 : 0); 

       if($(e.target).is(":checked")==1){ 
         var t = ($("#tot_balance").val() * 1)+(balance_amount * 1); 
         $("#tot_balance").val(t); 
       } 
       else{ 
        var t = ($("#tot_balance").val() * 1)-(balance_amount * 1); 
        $("#tot_balance").val(t); 
       }