如何从网格中获取复选框事件?

时间:2014-04-10 11:00:46

标签: javascript php checkbox kendo-ui

Kendo Grid

如何获得已检查行的余额总和?

我无法获取复选框的事件,然后是该特定行的列值。 请帮帮我。

2 个答案:

答案 0 :(得分:1)

我自己拿到了我的答案

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);
              }

答案 1 :(得分:0)

我在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 : "");
    });
});

请参阅原型以了解使用说明和代码的现场演示。

希望这会有所帮助。 :)