Psst.. new poll here.
Psst.. new forums here.
Microsoft is blocking us again (TY IP Reputation!) so just use oauth login instead. :)
Paste
Pasted as Plain Text by Ashok ( 14 years ago )
<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.01//en">
<html class="yui3-js-enabled"><head>
<title>YUI 3 QuickTre Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
[removed][removed]
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/reset-min.css">
<style type="text/css">
body
{
margin: 8px;
}
.pg-rpp-label
{
padding-left: 2em;
}
.yui3-skin-sam .yui3-datatable caption
{
padding: 0 !important;
}
</style>
</head>
<body class="yui3-skin-sam">
[removed]
YUI({
// filter: 'raw', combine: false,
gallery: 'gallery-2011.10.27-17-03'
}).use(
'datatable',
'gallery-treeble',
'gallery-quickedit',
'gallery-paginator',
function(Y)
{
function sendRequest()
{
table.datasource.load(
{
request:
{
startIndex: pg.getStartIndex(),
resultCount: pg.getRowsPerPage()
}
});
}
// column configuration
var cols =
[
{
key: 'treeblenub',
label: '',
formatter: Y.Treeble.buildTwistdownFormatter(sendRequest)
},
{
key: 'title',
label: 'Title',
formatter: Y.Treeble.treeValueFormatter
},
{ key: 'year', label: 'Year' },
{ key: 'quantity', label: 'Quantity',
quickEdit:
{
copyDown: true,
validation: { css: 'yiv-required yiv-integer:[0,]' }
}
}
];
// raw data
var data =
[
{title:"Fantasy",
kiddies:
[
{year:"1898-1963", title:"C.S. Lewis",
kiddies:
[
{year:"1950-1956", title:"Narnia",
kiddies:
[
{year:1950, quantity:10, title:"The Lion, the Witch and the Wardrobe"},
{year:1951, quantity:5, title:"Prince Caspian: The Return to Narnia"},
{year:1952, quantity:2, title:"The Voyage of the Dawn Treader"},
{year:1953, quantity:6, title:"The Silver Chair"},
{year:1954, quantity:9, title:"The Horse and His Boy"},
{year:1955, quantity:4, title:"The Magician's Nephew"},
{year:1956, quantity:8, title:"The Last Battle"}
]},
{year:"1938-1945", title:"Space Trilogy",
kiddies:
[
{year:1938, quantity:10, title:"Out of the Silent Planet"},
{year:1943, quantity:5, title:"Perelandra"},
{year:1945, quantity:2, title:"That Hideous Strength"}
]}
]},
{year:"1946-", title:"Philip Pullman",
kiddies:
[
{year:"1995-2000", title:"His Dark Materials",
kiddies:
[
{year:1995, quantity:7, title:"Northern Lights"},
{year:1997, quantity:5, title:"The Subtle Knife"},
{year:2000, quantity:8, title:"The Amber Spyglass"}
]}
]},
{year:"1892-1973", title:"J. R. R. Tolkien",
kiddies:
[
{year:1937, quantity:5, title:"The Hobbit"},
{year:"1937-1949", title:"The Lord of the Rings",
kiddies:
[
{year:1955, quantity:12, title:"The Fellowship of the Ring"},
{year:1955, quantity:0, title:"The Two Towers"},
{year:1955, quantity:8, title:"The Return of the King"}
]}
]}
]},
{title:"Science Fiction", _open: true,
kiddies:
[
{year:"1928-1982", title:"Philip K. Dick",
kiddies:
[
{year:1966, quantity:5, title:"Do Androids Dream of Electric Sheep?"}
]},
{year:"1907-1988", title:"Robert A. Heinlein", _open: true,
kiddies:
[
{year:1959, quantity:4, title:"Starship Troopers"},
{year:1961, quantity:7, title:"Stranger in a Strange Land"},
{year:1966, quantity:3, title:"The Moon Is a Harsh Mistress"}
]},
{year:"1912-2000", title:"A. E. van Vogt",
kiddies:
[
{year:1946, quantity:3, title:"Slan"},
{year:1950, quantity:5, title:"The Voyage of the Space Beagle"},
{year:1970, quantity:8, title:"Quest for the Future"}
]}
]},
{title:"Science",
kiddies:
[
{year:"1809-1882", title:"Charles Robert Darwin",
kiddies:
[
{year:1859, quantity:5, title:"On the Origin of Species by Means of Natural Selection, or the Preservation of Favoured Races in the Struggle for Life"},
{year:1881, quantity:2, title:"The Formation of Vegetable Mould through the Action of Worms"}
]},
{year:"1879-1955", title:"Albert Einstein",
kiddies:
[
{year:1905, quantity:8, title:"On a Heuristic Viewpoint Concerning the Production and Transformation of Light"},
{year:1905, quantity:5, title:"On the Electrodynamics of Moving Bodies"},
{year:1917, quantity:7, title:"Kosmologische Betrachtungen zur allgemeinen Relativitätstheorie"},
{year:1935, quantity:3, title:"Can Quantum-Mechanical Description of Physical Reality Be Considered Complete?"}
]},
{year:"1564-1642", title:"Galileo Galilei",
kiddies:
[
{year:1610, quantity:5, title:"Sidereus Nuncius"},
{year:1615, quantity:2, title:"Letter to the Grand Duchess Christina"},
{year:1632, quantity:6, title:"Dialogo sopra i due massimi sistemi del mondo"}
]},
{year:"1643-1727", title:"Isaac Newton",
kiddies:
[
{year:1671, quantity:7, title:"Method of Fluxions"},
{year:1687, quantity:4, title:"Philosophiæ Naturalis Principia Mathematica"},
{year:1704, quantity:3, title:"Opticks"},
{year:'1701-25', quantity:13, title:"Reports as Master of the Mint"}
]}
]},
{title:"Xenobiology"}
];
// treeble config to be set on root datasource
var schema =
{
resultFields:
[
'quantity','year','title', '_open',
{key: 'kiddies', parser: 'treebledatasource'}
]
};
// extend local data source to understand pagination
function CustomDataSource()
{
CustomDataSource.superclass.constructor.apply(this, arguments);
}
CustomDataSource.NAME = "customdatasource";
Y.extend(CustomDataSource, Y.DataSource.Local,
{
_defDataFn: function(e)
{
var response =
{
results: e.data.slice(e.request.recordOffset, e.request.recordOffset + e.request.rowsPerPage),
meta:
{
totalRecords: data.length
}
};
this.fire("response", Y.mix({response: response}, e));
}
});
var schema_plugin_config =
{
fn: Y.Plugin.DataSourceArraySchema,
cfg: {schema:schema}
};
var ds = new CustomDataSource({source: data});
ds.plug(schema_plugin_config);
var treeble_config =
{
generateRequest: function() { },
schemaPluginConfig: schema_plugin_config,
childNodesKey: 'kiddies',
nodeOpenKey: '_open',
totalRecordsReturnExpr: '.meta.totalRecords'
};
// root data source
var root = new Y.DataSource.Local({source: data});
root.treeble_config = Y.clone(treeble_config, true);
root.plug(schema_plugin_config);
// TreebleDataSource
var ds = new Y.TreebleDataSource(
{
root: root,
paginateChildren: false,
uniqueIdKey: 'title' // normally, it would a database row id, but title happens to be unique in this example
});
// Paginator
var pg = new Y.Paginator(
{
totalRecords: 1,
rowsPerPage: 1,
rowsPerPageOptions: [1,2,5,10,25,50],
template: '{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} <span class="pg-rpp-label">Rows per page:</span> {RowsPerPageDropdown}'
});
pg.render('#pg');
function updatePaginator(state)
{
this.setPage(state.page, true);
this.setRowsPerPage(state.rowsPerPage, true);
this.setTotalRecords(state.totalRecords, true);
sendRequest();
}
pg.on('changeRequest', updatePaginator, pg);
ds.on('response', function(e)
{
pg.setTotalRecords(e.response.meta.totalRecords, true);
pg.render();
});
// DataTable
var table = new Y.DataTable.Base({columnset: cols});
table.plug(Y.Plugin.DataTableDataSource, {datasource: ds});
table.plug(Y.Plugin.DataTableQuickEdit, {changesAlwaysInclude: ['id']});
table.render("#quicktree");
sendRequest();
// Controls
var start = Y.one('#start');
var save = Y.one('#save');
var cancel = Y.one('#cancel');
start.on('click', function()
{
table.qe.start();
start.set('disabled', true);
save.show();
cancel.show();
pg.hide();
});
function finish()
{
table.qe.cancel();
start.set('disabled', false);
save.hide();
cancel.hide();
pg.show();
}
save.on('click', function()
{
var changes = table.qe.getChanges();
if (changes)
{
if (window.console && window.console.log)
{
console.log(changes);
}
for (var i=0; i<changes.length; i++)
{
var change = changes[i];
var rec = null;
for (var j=0; j<data.length; j++)
{
if (data[j].id === change.id)
{
rec = data[j];
break;
}
}
if (rec)
{
for (var key in change)
{
if (change.hasOwnProperty(key))
{
rec[key] = change[key];
}
}
}
}
finish();
}
});
cancel.on('click', function ()
{
finish();
});
});
[removed]
<div id="pg"></div>
<div id="quicktree"></div>
</body></html>
Revise this Paste
Parent: 41782