Skip to content

Instantly share code, notes, and snippets.

@eduardolundgren
Created May 8, 2012 21:18
Show Gist options
  • Save eduardolundgren/2639385 to your computer and use it in GitHub Desktop.
Save eduardolundgren/2639385 to your computer and use it in GitHub Desktop.
DataTable adding new rows example
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
</head>
<body class="yui3-skin-sam">
<h1>Alloy - DataTable - Inline Cell Editing</h1>
<div class="example">
<button id="addRow">Add row</button>
<div id="container"></div>
</div>
<script type="text/javascript">
AUI().use('aui-datatable', function(A) {
var data = [{
"lastName": " Last Name",
"studentId": " institution Student ID",
"emailAddress": " Email Address",
"firstName": "First Name"
}, {
"lastName": "Sandstrom1",
"studentId": "1",
"emailAddress": "[email protected]",
"firstName": "Jeremy"
}, {
"lastName": "Sandstrom2",
"studentId": "2",
"emailAddress": "[email protected]",
"firstName": "Jeremy"
}, {
"lastName": "Sandstrom49",
"studentId": "49",
"emailAddress": "[email protected]",
"firstName": "Jeremy"
}];
var dtable = new A.DataTable.Base({
columnset: ['lastName', 'studentId', 'emailAddress', 'firstName'],
recordset: data
})
.render("#container");
A.one('#addRow').on('click', function() {
data.push({
"lastName": "New row",
"studentId": "00",
"emailAddress": "[email protected]",
"firstName": "New"
});
dtable.set('recordset', data);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment