1
我一直在努力自动展开一个树形结点而没有成功。我已阅读文档here，但一直无法找到一个工作示例或导致我的示例工作。有提到一个openNodeKey项目，但我没有找到任何文档指出我正确的方向。YUI Treeble切换（）展开或折叠
<script type="text/javascript">
YUI({
// filter: 'raw', combine: false,
gallery: 'gallery-2012.10.31-20-00'
}).use(
'datatable', 'datasource-arrayschema',
'gallery-treeble', 'gallery-paginator',
function(Y)
{
function sendRequest()
{
table.datasource.load(
{
request:
{
startIndex: pg.getStartIndex(),
resultCount: pg.getRowsPerPage()
}
});
}
// column configuration
var cols =
[
{
key: 'treeblenub',
label: ' ',
nodeFormatter: Y.Treeble.buildTwistdownFormatter(sendRequest)
},
{
key: 'title',
label: 'Building',
formatter: Y.Treeble.treeValueFormatter,
allowHTML: true
},
{ key: 'arrivals', label: 'Visitors #' },
{ key: 'occupancy_number', label: 'Occupancy #', allowHTML: true },
{ key: 'occupancy_percent', label: 'Occupancy %', allowHTML: true },
{ key: 'max_capacity', label: 'MAX Capacity' }
];
// raw data
var data =
[{title:"North Building",arrivals:"", occupancy_number:"0", max_capacity:"2000", occupancy_percent:"0%",
kiddies:
[{title:"Level 1", arrivals:"", occupancy_number:"0",max_capacity:"500", occupancy_percent:"0%" },{title:"Level 2", arrivals:"", occupancy_number:"0",max_capacity:"500", occupancy_percent:"0%" },{title:"Level 3", arrivals:"", occupancy_number:"0",max_capacity:"500", occupancy_percent:"0%" },{title:"Level 4", arrivals:"", occupancy_number:"0",max_capacity:"500", occupancy_percent:"0%" } ]},
{title:"East Building",arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%",
kiddies:
[
{title:"Level 1", arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%" },
{title:"Level 2", arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%" },
{title:"Level 3", arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%" }
]},
{title:"West Building",arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%",
kiddies:
[
{title:"Level 1", arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%" },
{title:"Level 2", arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%" },
{title:"Level 3", arrivals:"0", occupancy_number:"0", max_capacity:"0", occupancy_percent:"0%" } ]},
];
// treeble config to be set on root datasource
var schema =
{
resultFields:
[
"arrivals","occupancy_number","max_capacity","occupancy_percent","title",
{key: 'kiddies', parser: 'treebledatasource'}
]
};
var schema_plugin_config =
{
fn: Y.Plugin.DataSourceArraySchema,
cfg: {schema:schema}
};
var treeble_config =
{
generateRequest: function() { },
schemaPluginConfig: schema_plugin_config,
childNodesKey: 'kiddies',
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: true,
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: 20,
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');
pg.on('changeRequest', function(state)
{
this.setPage(state.page, true);
this.setRowsPerPage(state.rowsPerPage, true);
this.setTotalRecords(state.totalRecords, true);
sendRequest();
});
ds.on('response', function(e)
{
pg.setTotalRecords(e.response.meta.totalRecords, true);
pg.render();
});
// DataTable
var table = new Y.Treeble({columns: cols});
table.plug(Y.Plugin.DataTableDataSource, {datasource: ds});
table.datasource.get('datasource').toggle([1],0,null);
table.render("#treeble");
sendRequest();
});
</script>