1

各行にチェックボックスがあるグリッドを返すために使用する剣道グリッドがあります。これらのチェック ボックスの目的は、チェック ボックスがオンになっている各行の残高を追加し、ボタンを押した後に合計残高を処理することです。

これが私がそれを行う方法です：

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

私はより多くの操作を行いますが、アイデアを得るために、このフィドルをここで見てください

チェックボックスをクリックすると、コードが正常に処理され、jquery で次のエラーが返されます。

Uncaught TypeError: Cannot read property 'nodeName' of null
4

1 に答える 1

2

代わりにこれを使用してください：

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

私が思うに、個々の.invoiceDisplayチェックボックスにクリックハンドラーを追加しています.set()が、データ項目のプロパティの値を取得するとchange、DataSource. これにより、グリッドが更新されて更新されたデータが表示され、行の HTML 要素が再作成され、クリック ハンドラが失われます (これらは新しい要素であるため)。

上記の新しい JavaScript は、単一のクリック ハンドラーを#invoiceGrid要素に追加し、項目に対してのみ実行するサブ セレクターを持って.invoiceDisplayいますが、クリック ハンドラーはグリッド自体にあるため失われません。

于 2013-09-10T22:22:28.790 に答える