Question

我一直在努力自动扩展一个treeble节点而没有成功。我查看了here找到的文档，但无法找到工作示例或导致我的示例工作。有一个openNodeKey项目的提及，但我找不到任何文档指出我正确的方向。

<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: '&nbsp;',
        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>

Answer 1

文档有点稀疏，但是nodeOpenKey is mentioned。

在basic example中，nodeOpenKey定义为“_open”。如果您搜索_open，您会看到它嵌入在数据中。 _open:true的节点在首次查看时会打开。

YUI Treeble Toggle（）展开或折叠

1 个答案: