How to intercept events from a column of check boxes and show a spinner.

index.html

[crayon language="html"]
< !doctype html>

YUI Datatable

[/crayon]

js/datatable.js

[crayon language="javascript"]
YUI({ lang: “en-US” }).use(‘datatable’, ‘datatable-scroll’, ‘datatype’, ‘datasource’,
function (Y) {

function formatDate(cell) {
return Y.DataType.Date.format(cell.value, { format: “%d %b %Y” });
}

function formatCurrencyCell(cell) {
return formatCurrency(cell.value);
}

function formatCurrency(number) {
format = {
suffix: ‘ €’,
thousandsSeparator: ‘,’,
decimalSeparator: ‘.’,
decimalPlaces: 2
};
return Y.DataType.Number.format(number, format);
}

function formatId(cell) {
var checkBox = ‘ 'style="width:16px;height:16px;margin-left:3px;display: none"/>‘ +
‘ if (cell.data.checked) {
checkBox += ' checked'
}
checkBox += '/>‘;
return checkBox;
}

var myDataSource = new Y.DataSource.Get({
source: “json_invoices.php?”
});

myDataSource.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: {
schema: {
resultListLocator: “data”,
resultFields: ["id", "checked", "number", "issued", "amount", "vatp"]
}
}});

var table = new Y.DataTable({
scrollable: ‘y’,
height: ’200px’,
width: ’700px’,
columns: [
{ key: "id", label: " ", sortable: false, formatter: formatId, allowHTML: true },
{ key: "number", label: "Number", className: "number", sortable: true },
{ key: "issued", label: "Issue Date", formatter: formatDate, sortable: true },
{ key: "amount", label: "Amount", formatter: formatCurrencyCell,
className: "number", sortable: true },
{ key: "vat", label: "VAT", formatter: formatCurrencyCell,
className: "number" },
{ key: "total", label: "Total", formatter: formatCurrencyCell,
className: "number" }
],
recordType: {
vat: {
getter : function () {
return this.get(‘amount’) * this.get(‘vatp’) / 100;
}
},
total: {
getter: function() {
return this.get(‘amount’) + this.get(‘vat’);
}
}
},
caption: “Invoice List”
});

table.plug(Y.Plugin.DataTableDataSource, {
datasource: myDataSource
});

table.datasource.load({
request: encodeURIComponent(”)
});

Y.one(‘#invoices’).delegate(‘click’, checkboxClick, ‘input’);

function checkboxClick(event) {
event.preventDefault();
//console.log(Y.Node.getDOMNode(event.target).checked);
event.target.hide();
var id = event.target.get(“id”).substring(6);
Y.one(‘#spinner-’ + id).show();
console.log(id);
}

table.render(“#invoices”);

});
[/crayon]