treeview控件如何绑定xml⽂件数据_前端组件之⽂件树
组件从零之⽂件树
很久没有更新了，今天就来谈谈⽂件树这个组件的⼀些原理和做法。⾸先看看⽂件树的组件效果，如下图就是⼀个很基本的⽂件树。
效果图
原理
⾸先讲⼀下原理，其实也还是通过 display:block和display:none 的实现。在⼀个⽆序列表中，有的li标签下包裹着⼦树，⽽有的⽂件树下没有，那些有⼦树的⽂件我们前⾯给他⼀个加和减的符号⽤于辨识。 对于有⼦树的⽂件夹，默认情况下是加号的图标，⼦树通
过display:none⽽隐藏。当点击对应的li时，把相应的⼦树通过 display:block显⽰出来即可。⽽对于⼦树的缩放，则可以直接
⽤padding-left进⾏缩放就好了。假设缩放量⼀层为20px，那么只要对应⼩⼀级别就缩放20px对应倍数就好了。
html代码清单
<div>
<ul>
<li>
<div >
<i class="icon icon-control icon-plus"></i>
<i class="icon icon-file"></i>
<span>全部⽂件</span>
</li>
</ul>
</div>
background-
padding-left直接控制缩放量。icon直接导⼊背景图⽚，通过改变雪碧图的background-
这个就是最基础的结构了。其中style中的padding-left
position来 控制对应图标。当然假如有⼦级的话只要在li标签内的span标签后⾯继续嵌套即可。
position
下图是⽤到的图
⽤到的雪碧图
css代码清单
.icon {
display: inline-block;
background: url(../img/icon.png) no-repeat;
vertical-align: middle;
}
.icon-minus {
width: 15px;
height: 15px;
margin: 0 4px;
background-position: -30px -22px;
}
.icon-plus {
width: 15px;
height: 15px;
margin: 0 4px;
background-position: -30px 0;
}
.
icon-file {
width: 22px;
height: 18px;
margin-right: 5px;
background-position: 0 -22px;
}
假设已经有了下图这样的结果了，下⼀步就是通过js来控制点击⾏为。
简单来说就是给有⼦代的li绑定事件监听，通过更改类名实现 display:block和display:none ，同时更换加减号图标。 通过这种⽅法，我们能实现⽅法，但是每次假如想添加⼦数，就只能通过臃长的代码来⼀步⼀步解决。 所以下⾯讲讲如何通过js(jq)，来实现便捷⼀点的⽂件树。
通过JavaScript实现复杂⼀点的⽂件树
第⼀步⾸先是把⽤到的样式和结构完成好。
css代码清单
* { margin: 0; padding: 0; }
body{
font-size: 14px;
color: #333;
font-family: "microsoft yahei";
}
ul, li { list-style-type: none;}
ul, li { list-style-type: none;}
#treeView {
width: 600px;
margin: 20px auto 0;
border: 1px solid #f2f2f2;
}
.treeNode {
height: 32px;
border: 1px solid #fff;
border-width: 1px 0;
cursor: pointer;
font-size: 0;
}
.treeNode:hover {
background: #f4f9fd;
border-color: #e5f0fb;
}
.treeNode-cur,
.treeNode-cur:hover {
background: #e5f0fb;
border-color: #BBD4EF #fff;
}
.icon {
display: inline-block;
background: url(../img/icon.png) no-repeat;
vertical-align: middle;
}
.icon-minus {
width: 15px;
height: 15px;
margin: 0 4px;
background-position: -30px -22px;
}
.icon-plus {
width: 15px;
height: 15px;
margin: 0 4px;
background-position: -30px 0;
}
.icon-file {
width: 22px;
height: 18px;
margin-right: 5px;
background-position: 0 -22px;
}
.title {
position: relative;
top: 6px;
font-size: 14px;
}
.treeNode-empty .icon-minus {
background-position: -999px -999px;
}
.treeNode-empty .icon-plus {
background-position: -999px -999px;
}
# {
display: none;
}
结构上，我们只需要⼀⾏代码，因为后续的代码都是通过js渲染html结构。
html代码清单
<div id="treeView"></div>
第⼆步，新建⼀个js⽂件保存⽤到⽂件树数据
pid，还有这不同于⽤html上直接写结构，对于每⼀个数的节点，我们通过数组记录，每⼀个数组⼦项有三个属性， 分别是id id，记录第⼏级的pid
个⼦项的标题(⽂字)显⽰。
js代码清单
var data = {
files: [
{
id: 0,
pid: -1,
title: '全部⽂件' },
{
id: 1,
pid: 0,
title: '我的图⽚' },
{
id: 2,
pid: 0,
title: '我的⾳乐' },
{
id: 3,
pid: 0,
title: '我的电影' },
{
id: 4,
pid: 0,
title: '我的书籍' },
{
id: 11,
pid: 1,
title: '风景'
},
{
id: 12,
pid: 1,
title: '⼈物'
},xml文件怎么打开
{
id: 13,
pid: 1,
title: '动物'
},
{
id: 41,
pid: 4,
title: 'JavaScript' },
{
id: 42,
pid: 4,
title: 'Java'
},
{
id: 43,
pid: 4,
title: 'PHP'
}
]
};
发布评论