Code JS :
"use strict";
head.ready( [
"d3", "d3Hello",
"jquery", "jqueryui",
"qunit", "testsQUnit",
"dynatree"
], function(){
/*
* Contruction d'une arborescence avec le plugin dynatree.
*/
var App = ( function( $, W ){
var Defaults = {
"id" : "tree",
"jsonFile" : "tree.json",
"debugLevel" : 2 // 0 : quiet, 1 : normal, 2 : debug
},
Opts = null,
jObjTree = null,
initTree = function initTree(){
jObjTree = $( "#" + Opts[ "id" ] ).dynatree({
"onActivate" : function( node ){
console.log( "You activated " + node.data.title );
/*
* node.toDict( recursive, callback )
*
* Convert the node into a JavaScript object.
* recursive: set to true, to include child nodes.
* callback: (optional) function to allow modifications.
*/
var tab = [];
node.toDict( true, function( dict ){
tab.push( [ dict.title, dict.key ] );
});
console.log( tab.join() );
},
"persist" : true,
"initAjax" : {
"url" : Opts[ "jsonFile" ],
"data" : {
"key" : "root", // Optional arguments to append to the url
"mode" : "all"
}
},
"onLazyRead" : function( node ){
node.appendAjax({
url: "faqlazy.json",
data: {
"key": node.data.key, // Optional url arguments
"mode": "all"
}
});
},
"debugLevel" : Opts[ "debugLevel" ]
});
};
return {
"ready" : function( id, jsonFile ){
if ( id && jsonFile ){
Opts = $.extend( true, {}, Defaults, {
"id" : id,
"jsonFile" : jsonFile
});
initTree();
} else {
console.log( "Vous devez définir les paramètres id et jsonFile." );
}
}
};
})( jQuery, window );
App.ready( "tree", "faq.json" );
if ( debugBool ){
testQUnitSelector( "faq.js", [
"#tree"
] );
testQUnitID( "faq.js", [
"tree"
] );
}
});
Code JSON (faq.json) :
[
{
"title" : "Item 1"
},
{
"title" : "Folder 2",
"isFolder" : true,
"children" : [
{
"title" : "Sub-item 2.1"
},
{
"title" : "Sub-item 2.2"
}
]
},
{
"title" : "Item 3"
},
{
"title" : "Folder 4",
"isFolder" : true,
"isLazy" : true
}
]
Code JSON (faqlazy.json) :
[
{
"title" : "Sub-item 4.1",
"isFolder" : true,
"children" : [
{
"title" : "Sub-item 4.1.1"
},
{
"title" : "Sub-item 4.1.2"
}
]
}
]