Question

我有一个Kendo Grid，用于返回每行都有复选框的网格。这些复选框的目的是添加具有选中复选框的每一行的余额金额，并在按下按钮后处理总余额金额。

我是这样做的：

function getData() {
return  [
    { accountNumber: "28495", transactionNumber: "2440", TransType: "INV", TransReferenceNumber: "11867115", transactionDate: "6/18/2013", transactionDebitAmount: "1920.20", openBalance: "1920.20", discountAmount: "93.60", discountApplied: "0.00", dueDate: "8/17/2013", paymentApplied: "0.00" },
    { accountNumber: "12495", transactionNumber: "1430", TransType: "INV", TransReferenceNumber: "11867225", transactionDate: "1/18/2011", transactionDebitAmount: "27620.20", openBalance: "1920.20", discountAmount: "111.60", discountApplied: "0.00", dueDate: "2/12/2013", paymentApplied: "0.00" },
    { accountNumber: "18495", transactionNumber: "1440", TransType: "INV", TransReferenceNumber: "11867115", transactionDate: "5/9/2013", transactionDebitAmount: "13320.20", openBalance: "1920.20", discountAmount: "93.60", discountApplied: "0.00", dueDate: "8/17/2013", paymentApplied: "0.00" }
             ];
}



 var grid;
 var dataSource;
 var data;

function drawInvoiceTable() {
    invoiceTable = $('#invoiceGrid').kendoGrid({
        sortable: true,
        pageable: true,
        dataSource: {
            data: getData(),
            pageSize: 10,
            schema: {
                model: {
                    id: 'test',
                    fields: {
                        active: false
                    }
                }
            }
        },
        columns: [
             { template: "<input type='checkbox' id='chkInvoices' class='invoiceDisplay' name='chkInvoices' #= active ? checked='checked' : '' #/>", width: 30 },
            { field: 'accountNumber', title: 'Account', attributes: { 'class': 'accountnumber' }, sortable: true },
            { field: 'transactionDate', title: 'Trans Date', attributes: { 'class': 'transdate' }, width: 100, sortable: true },
            { field: 'TransType', title: 'Type', attributes: { 'class': 'transType' }, width: 60, sortable: true },
            { field: 'TransReferenceNumber', title: 'Reference Number', attributes: { 'class': 'refnumber' }, width: 135, sortable: true },
            { field: 'transactionDebitAmount', title: 'Amount', attributes: { 'class': 'amount' }, width: 90, sortable: true },
            { field: 'openBalance', title: 'Balance', width: 90, attributes: { 'class': 'balance' }, template: '#= kendo.format("{0:p}", openBalance) #', sortable: true },
            { field: 'discountAmount', title: 'Discount', format: "{0:c}", attributes: { 'class': 'discount', 'data-format': 'c' }, width: 90, sortable: false },
            { field: 'discountApplied', title: 'Discount Applied', width: 95, attributes: { 'class': 'discapplied' }, sortable: false },
            { field: 'paymentApplied', title: 'Payment Applied' , width: 95, attributes: { 'class': 'paymentapplied' }, sortable: false },
            { field: 'discountDate', title: 'Discount Date', attributes: { 'class': 'discountDate' } },
            { field: 'dueDate', title: 'Due Date', width: 90, sortable: true }            
        ]
    });

    grid = $('#invoiceGrid').data('kendoGrid');
    dataSource = grid.dataSource;
    data = dataSource.data();
    }

$('.invoiceDisplay').on('change', function(e) {
    var idx = $(e.target).closest('tr').prevAll().length;
    var currentRow = data[idx];
    if(currentRow.active) {
        return;
    }
    var temp = currentRow.transactionDebitAmount;

    currentRow.set('active', true);
    currentRow.set('transactionDebitAmount', "0.00");
    currentRow.set('paymentApplied', temp);
    $("input[type='text']").val(temp);
});

我做了更多操作但是给你一个想法，看看这个小提琴here

单击复选框后，它会完成代码，然后在jquery中返回以下错误：

Uncaught TypeError: Cannot read property 'nodeName' of null

Answer 1

请改用：

$('#invoiceGrid').on('change', '.invoiceDisplay', function (e) { ... });

我认为发生的是您为每个.invoiceDisplay复选框添加了一个点击处理程序，但当您.set()某些数据项属性的值时，它会触发{{1} change上的事件。这会导致Grid刷新以显示更新的数据，这会重新创建行HTML元素，并丢失单击处理程序（因为它们是新元素）。

上面的新JavaScript为DataSource元素添加了一个单击处理程序，并且有一个子选择器只能运行#invoiceGrid个项目，但是你没有松开点击处理程序，因为它处于打开状态网格本身。

在更改Kendo UI Grid Data后，jquery返回错误

1 个答案: