更改 Kendo UI 网格数据后，jquery 返回错误 [英] jquery returns an error after i make changes to Kendo UI Grid Data

问题描述

我有一个 Kendo Grid，我用它来返回一个每行都有复选框的 Grid.这些复选框的目的是添加复选框的每一行的余额金额，并在我按下按钮后处理总余额金额.

I have a Kendo Grid that I use to return a Grid that has check boxes in each rows. The purpose of those check boxes is to add the Balance amount of each row that has a checked check box and process the total Balance amount after I press a button.

我是这样做的:

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

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

I do more operation but to give you an idea, look at this fiddle here

在我单击复选框后，它通过代码正常运行，然后在 jquery 中返回以下错误:

After I click the checkbox it goes through the code fine, then in jquery the following error is returned:

Uncaught TypeError: Cannot read property 'nodeName' of null 

推荐答案

改用这个:

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

我认为发生的事情是您正在为每个单独的 .invoiceDisplay 复选框添加一个点击处理程序，但是当您 .set() 某些数据的值item 属性，它触发 DataSource 上的 change 事件.这会导致 Grid 刷新以显示更新的数据，从而重新创建行 HTML 元素，并丢失点击处理程序(因为它们是新元素).

What I think happens is that you are adding a click handler to each individual .invoiceDisplay checkbox, but when you .set() the value of some of the data item properties, it triggers a change event on the DataSource. This causes the Grid to refresh to display the updated data, which recreates the row HTML elements, and looses the click handlers (since they are new elements).

上面的新 JavaScript 向 #invoiceGrid 元素添加了一个单击处理程序，并且有一个子选择器只为 .invoiceDisplay 项运行，但您没有松开点击处理程序，因为它位于网格本身上.

The new JavaScript above adds a single click handler to the #invoiceGrid element, and has a sub selector to only run for .invoiceDisplay items, but you don't loose the click handler since it is on the grid itself.

这篇关于更改 Kendo UI 网格数据后，jquery 返回错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！