<!doctype html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style type="text/css">
body {
xbackground: #000;
font-family: arial, sans-serif;
font-size: 13px;
}
#log {
background: #fff;
position: absolute;
top: 10px;
right: 10px;
width: 300px;
border: 2px ridge;
padding: 10px;
}
#log p {
margin: 1em 0;
}
</style>
</head>
<body>
<button id="add">Add a row</button>
<button id="remove">Remove a row</button>
<button id="modify">Modify a row</button>
<button id="addcol">Add a column</button>
<button id="removecol">Remove a column</button>
<button id="modifycol">Modify a column</button>
<button id="modifywidth">Modify width</button>
<button id="sort">Sort</button>
<button id="showmessage">Show Message</button>
<button id="hidemessage">Hide Message</button>
<button id="sync">syncUI</button>
<button id="scrollable">Toggle scrollable</button>
<!--div id="log"></div-->
<div class="wrapper yui3-skin-sam">
<div id="x"></div>
</div>
<p>
This is some content below the table.
</p>
<!--script src="http://yui.yahooapis.com/3.4.1/build/yui/yui.js"></script-->
<!--script src="http://yui.yahooapis.com/3.5.0pr4/build/yui/yui.js"></script-->
<script src="/build/yui/yui.js"></script>
<!--script src="/dev/yui3/src/datatable/js/mutable.js"></script-->
<script>
YUI({
filters: {
'datatable-scroll': 'debug'
},
filter: 'raw'
}).use(
'datatable-scroll', 'datatable-sort', 'datatable-mutable',
'datatable-message',
'datasource-io', 'datatable-datasource', 'datasource-jsonschema',
function (Y) {
var data = [], i;
for (i = 0; i < 10; ++i) {
data.push({
apples : 'Apple ' + Math.round(Math.random() * 100),
bananas : 'Banana ' + Math.round(Math.random() * 100),
carrots : 'Carrot ' + Math.round(Math.random() * 100),
daikon : 'Daikon ' + Math.round(Math.random() * 100),
eggs : 'Egg ' + Math.round(Math.random() * 100),
fennel : 'Fennel ' + Math.round(Math.random() * 100),
guacamole: 'Guac ' + Math.round(Math.random() * 100)
});
}
data[1].eggs = data[1].fennel = data[1].guacamole = '';
var start = new Date();
var table = new Y.DataTable({
data: data,
scrollable: 'xy',
//width: '100%',
//width: '750px',
width: '500px',
height: '250px',
//autoSync: true,
sortable: true,
//sortable: ['carrots'],
caption: 'Can you hear the caption?',
sortBy: [{ apples: 'desc' }],
columns: [
{
key: 'apples',
label: 'Apples',
//headerTemplate: '<th class="{className}" rowspan="{_rowspan}" colspan="{_colspan}" scope="col"><strong>{content}</strong></th>',
//cellTemplate: '<th class="{className}" scope="row">{content}</th>',
allowHTML: true,
width: '150px',
sortFn: function (a, b, desc) {
a = +a.get('apples').replace(/\D/g, ''),
b = +b.get('apples').replace(/\D/g, ''),
order = (a > b) ? 1 : (a < b) ? -1 : 0;
return desc ? -order : order;
},
sortDir: -1
},
{ label: "Parent of B and C", children: [
{ key: 'bananas' },
{ key: 'carrots' }
]},
{ label: "Parent of D through G", children: [
{ label: 'Parent of D and E', children: [
{ key: 'daikon' },
{ key: 'eggs', xwidth: '200px' }
]},
{ label: 'Parent of F and G', children: [
'fennel', 'guacamole'
]}
]}
]
});
var milestone = new Date();
//console.log('instantiation: ', milestone - start);
table.delegate('click', function (e) {
console.log(table.getRecord(this).toJSON());
//console.log(table.data.getByClientId(this.get('id')).toJSON());
}, '.yui3-datatable-data tr');
/*
table.plug(Y.Plugin.DataTableDataSource, {
datasource: new Y.DataSource.IO({
source: "data.php?fields=author,title"
}).plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: 'records',
resultFields: ['author', 'title']
}
})
});
*/
/*
var log = Y.one('#log');
Y.on('yui:log', function (e) {
log.append('<p>' + e.msg + '</p>');
});
*/
table.render('#x');
//console.log('render: ', new Date() - milestone, 'overall: ', new Date() - start);
//table.datasource.load();
Y.one('#add').on('click', function () {
table.addRow({
apples: 'Jan Comstock',
bananas: '1234',
carrots: 'The Diaries of Phil Collins',
daikon: 'What?',
eggs: 'scrambled',
fennel: 'raw, 2tbsp',
guacamole: 'For the chips!'
});
});
Y.one('#remove').on('click', function () {
table.removeRow(0);
});
Y.one('#modify').on('click', function () {
table.modifyRow(0, { daikon: 'MOAR DAIKON!' });
});
Y.one('#addcol').on('click', function () {
table.addColumn({
key: 'apples',
formatter: function (o) {
return ('' + o.value).toUpperCase();
}
});
});
Y.one('#removecol').on('click', function () {
table.removeColumn([1,1]);
});
Y.one('#modifycol').on('click', function () {
table.modifyColumn(0, { formatter: function (o) {
return ('<strong>' + o.value).toLowerCase() + '</strong>';
}});
});
Y.one('#modifywidth').on('click', function () {
var width = table.get('width') || '500px',
unit = (''+width).replace(/[0-9]/g, '');
table.set('width', Math.round(parseInt(width, 10) * 1.1) + unit);
//console.log('width is ', table.get('width'));
});
Y.one('#sort').on('click', function () {
table.sort([{ daikon: -1 }, { bananas: -1 }]);
});
Y.one('#showmessage').on('click', function () {
table.showMessage('loadingMessage');
});
Y.one('#hidemessage').on('click', function () {
table.hideMessage();
});
Y.one('#sync').on('click', function () {
table.syncUI();
});
Y.one('#scrollable').on('click', function () {
var scrollable = {
x: 'xy',
y: 'x',
xy: false
},
current = table.get('scrollable');
table.set('scrollable', current ? scrollable[current] : 'y');
});
});
</script>
</body>
</html>