js 静态树

最新推荐文章于 2024-03-04 15:23:47 发布

shicuicui1234

最新推荐文章于 2024-03-04 15:23:47 发布

阅读量390

点赞数

本文链接：https://blog.csdn.net/shicuicui1234/article/details/53437079

版权

<!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">
<link rel="stylesheet" href="../jar/css/font-awesome.css">
</head>

<body>
<div class="row">
<div class="col-sm-6">
<div class="widget-box widget-color-green2">
<div class="widget-header">
<h4 class="widget-title lighter smaller">Browse Files</h4>
</div>

<div class="widget-body">
<div class="widget-main padding-8">
<ul id="tree2"></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

$('#tree2')
.ace_tree(
{
dataSource : sampleData['dataSource2'],
loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
'open-icon' : 'ace-icon fa fa-folder-open',
'close-icon' : 'ace-icon fa fa-folder',
'selectable' : false,
multiSelect : false,
'selected-icon' : null,
'unselected-icon' : null
});

function initiateDemoData() {
var tree_data_2 = {
'pictures' : {
text : 'Pictures',
type : 'folder',
'icon-class' : 'red'
},
'music' : {
text : 'Music',
type : 'folder',
'icon-class' : 'orange'
},
'video' : {
text : 'Video',
type : 'folder',
'icon-class' : 'blue'
},
'documents' : {
text : 'Documents',
type : 'folder',
'icon-class' : 'green'
},
'backup' : {
text : 'Backup',
type : 'folder'
},
'readme' : {
text : '<i class="ace-icon fa fa-file-text grey"></i> ReadMe.txt',
type : 'item'
},
'manual' : {
text : '<i class="ace-icon fa fa-book blue"></i> Manual.html',
type : 'item'
}
};
tree_data_2['music']['additionalParameters'] = {
'children' : [
{
text : '<i class="ace-icon fa fa-music blue"></i> song1.ogg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-music blue"></i> song2.ogg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-music blue"></i> song3.ogg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-music blue"></i> song4.ogg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-music blue"></i> song5.ogg',
type : 'item'
} ]
};
tree_data_2['video']['additionalParameters'] = {
'children' : [
{
text : '<i class="ace-icon fa fa-film blue"></i> movie1.avi',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-film blue"></i> movie2.avi',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-film blue"></i> movie3.avi',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-film blue"></i> movie4.avi',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-film blue"></i> movie5.avi',
type : 'item'
} ]
};
tree_data_2['pictures']['additionalParameters'] = {
'children' : {
'wallpapers' : {
text : 'Wallpapers',
type : 'folder',
'icon-class' : 'pink'
},
'camera' : {
text : 'Camera',
type : 'folder',
'icon-class' : 'pink'
}
}
};
tree_data_2['pictures']['additionalParameters']['children']['wallpapers']['additionalParameters'] = {
'children' : [
{
text : '<i class="ace-icon fa fa-picture-o green"></i> wallpaper1.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> wallpaper2.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> wallpaper3.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> wallpaper4.jpg',
type : 'item'
} ]
};
tree_data_2['pictures']['additionalParameters']['children']['camera']['additionalParameters'] = {
'children' : [
{
text : '<i class="ace-icon fa fa-picture-o green"></i> photo1.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> photo2.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> photo3.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> photo4.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> photo5.jpg',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-picture-o green"></i> photo6.jpg',
type : 'item'
} ]
};

tree_data_2['documents']['additionalParameters'] = {
'children' : [
{
text : '<i class="ace-icon fa fa-file-text red"></i> document1.pdf',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-file-text grey"></i> document2.doc',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-file-text grey"></i> document3.doc',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-file-text red"></i> document4.pdf',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-file-text grey"></i> document5.doc',
type : 'item'
} ]
};

tree_data_2['backup']['additionalParameters'] = {
'children' : [
{
text : '<i class="ace-icon fa fa-archive brown"></i> backup1.zip',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-archive brown"></i> backup2.zip',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-archive brown"></i> backup3.zip',
type : 'item'
},
{
text : '<i class="ace-icon fa fa-archive brown"></i> backup4.zip',
type : 'item'
} ]
};
var dataSource2 = function(options, callback) {
var $data = null;
if (!("text" in options) && !("type" in options)) {
$data = tree_data_2;//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)//this setTimeout is only for mimicking some random delay
setTimeout(function() {
callback({
data : $data
});
}, parseInt(Math.random() * 500) + 200);
};

return {
'dataSource2' : dataSource2
};
}

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

shicuicui1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 静态树

树.htmlcontent="width=device-width, initial-scale=1.0, maximum-scale=1.0" />Browse FilesjQuery(function($) {var sampleData = init
复制链接

扫一扫