js 静态树

来源：互联网发布：鸿运通网络编辑：程序博客网时间：2024/06/07 05:09

<!DOCTYPE html>
<html>
<head>
<title>树.html</title>

<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="../jar/css/bootstrap.min.css">
<link rel="stylesheet" href="../jar/css/ace.min.css">
</head>

<body>
<div class="row">
<div class="col-sm-6">
<div class="widget-box widget-color-blue2">
<div class="widget-header">
<h4 class="widget-title lighter smaller">Choose Categories</h4>
</div>

<div class="widget-body">
<div class="widget-main padding-8">
<ul id="tree1"></ul>
</div>
</div>
</div>
</div>

</div>
<script type="text/javascript" src="../jar/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../jar/bootstrap.min.js"></script>
<script type="text/javascript" src="../jar/fuelux.tree.js"></script>
<script type="text/javascript" src="../jar/elements.treeview.js"></script>
<script type="text/javascript" src="../jar/ace.js"></script>
<script type="text/javascript">
jQuery(function($) {
var sampleData = initiateDemoData();//see below

$('#tree1').ace_tree(
{
dataSource : sampleData['dataSource1'],
multiSelect : true,
cacheItems : true,
'open-icon' : 'ace-icon tree-minus',
'close-icon' : 'ace-icon tree-plus',
'selectable' : true,
'selected-icon' : 'ace-icon fa fa-check',
'unselected-icon' : 'ace-icon fa fa-times',
loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
});

function initiateDemoData() {
var tree_data = {
'for-sale' : {
text : 'For Sale',
type : 'folder'
},
'vehicles' : {
text : 'Vehicles',
type : 'folder'
},
'rentals' : {
text : 'Rentals',
type : 'folder'
},
'real-estate' : {
text : 'Real Estate',
type : 'folder'
},
'pets' : {
text : 'Pets',
type : 'folder'
},
'tickets' : {
text : 'Tickets',
type : 'item'
},
'services' : {
text : 'Services',
type : 'item'
},
'personals' : {
text : 'Personals',
type : 'item'
}
};
tree_data['for-sale']['additionalParameters'] = {//额外的因素
'children' : {
'appliances' : {
text : 'Appliances',
type : 'item'
},
'arts-crafts' : {
text : 'Arts & Crafts',
type : 'item'
},
'clothing' : {
text : 'Clothing',
type : 'item'
},
'computers' : {
text : 'Computers',
type : 'item'
},
'jewelry' : {
text : 'Jewelry',
type : 'item'
},
'office-business' : {
text : 'Office & Business',
type : 'item'
},
'sports-fitness' : {
text : 'Sports & Fitness',
type : 'item'
}
}
};
tree_data['vehicles']['additionalParameters'] = {
'children' : {
'cars' : {
text : 'Cars',
type : 'folder'
},
'motorcycles' : {
text : 'Motorcycles',
type : 'item'
},
'boats' : {
text : 'Boats',
type : 'item'
}
}
};
tree_data['vehicles']['additionalParameters']['children']['cars']['additionalParameters'] = {
'children' : {
'classics' : {
text : 'Classics',
type : 'item'
},
'convertibles' : {
text : 'Convertibles',
type : 'item'
},
'coupes' : {
text : 'Coupes',
type : 'item'
},
'hatchbacks' : {
text : 'Hatchbacks',
type : 'item'
},
'hybrids' : {
text : 'Hybrids',
type : 'item'
},
'suvs' : {
text : 'SUVs',
type : 'item'
},
'sedans' : {
text : 'Sedans',
type : 'item'
},
'trucks' : {
text : 'Trucks',
type : 'item'
}
}
};

tree_data['rentals']['additionalParameters'] = {
'children' : {
'apartments-rentals' : {
text : 'Apartments',
type : 'item'
},
'office-space-rentals' : {
text : 'Office Space',
type : 'item'
},
'vacation-rentals' : {
text : 'Vacation Rentals',
type : 'item'
}
}
};
tree_data['real-estate']['additionalParameters'] = {
'children' : {
'apartments' : {
text : 'Apartments',
type : 'item'
},
'villas' : {
text : 'Villas',
type : 'item'
},
'plots' : {
text : 'Plots',
type : 'item'
}
}
};
tree_data['pets']['additionalParameters'] = {
'children' : {
'cats' : {
text : 'Cats',
type : 'item'
},
'dogs' : {
text : 'Dogs',
type : 'item'
},
'horses' : {
text : 'Horses',
type : 'item'
},
'reptiles' : {
text : 'Reptiles',
type : 'item'
}
}
};

var dataSource1 = function(options, callback) {
var $data = null;
if (!("text" in options) && !("type" in options)) {
$data = tree_data;//the root tree
callback({
data : $data
});
return;
} else if ("type" in options && options.type == "folder") {
if ("additionalParameters" in options
&& "children" in options.additionalParameters){
$data = options.additionalParameters.children;
}else{
$data = {};//no data
}
}

if ($data != null)//这将只是模仿某些随机延迟==数据的加载效果
setTimeout(function() {
callback({
data : $data
});
}, parseInt(Math.random() * 500) + 200);
};
return {
'dataSource1' : dataSource1,
};
}

});
</script>
</body>
</html>

0 0