问题来由
工作上业务有个需求,树状图展示数据。这个好办,很多组件,插件都有数状图。比如Ant组件。但是想在tree的文字后面再做扩展却是很难。可以说基本办不到。
类似于这种树状图。ant基本已经写死了。那么办法只能自己整了。
自己手写的效果:
上代码
这个就不多说了,用li画就可以了,由于我这里规定好了只有三级目录,所以直接写死了。如果不确定有几级的话再想其他办法,用递归也可以的。
<ul class="treeMain">
<li *ngFor="let item of treeData;let i=index" >
<span class='icon-open' id="li-{{i}}" (click)="showChild($event)">{{item.name}}</span>
<ul *ngIf="item.value && item.value.length!==0 " class="changeNone">
<li *ngFor="let elm of item.value ;let j=index" >
<span class='icon-open' id="li-{{i}}-{{j}}" (click)="showChild($event)">{{elm.type}}</span> <span>({{elm.count}})</span>
<ul *ngIf="elm.data && elm.data.length!==0" class="changeNone">
<li *ngFor="let elemt of elm.data;let k=index" >
<span class='icon-open' id="li-{{i}}-{{j}}-{{k}}" (click)="showChild($event)">{{elemt.key}}</span>
<div class="jd-box" *ngIf="elemt.value&&elemt.value.indexOf('%')>-1">
<div class="jd">
<div id="fill" [ngStyle]="{'width': elemt.value}"> </div>
<div class="item" *ngFor="let item of jdLine;let i=index" [ngStyle]="{'left':4*(i+1)+'px'}"></div>
</div>
<span style="font-size: 12px;line-height: 34px;">{{elemt.value}}</span>
</div>
<span *ngIf="elemt.value&&elemt.value.indexOf('%')===-1">({{elemt.value}})</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
.treeMain ul {
margin-left: 7px;
border-left: 1px solid #ccc;
}
.treeMain span{
width: 56px;
height: 14px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 30px;
letter-spacing: 0px;
color: #686868;
}
.treeMain ul li{
margin-left: 8px;
}
.icon-open:before {
margin-right: 11px;
}
.icon-close:before {
margin-right: 11px;
}
.jd-box{
display: inline;
}
.jd{
width: 56px;
height: 6px;
margin: 0 8px;
display: inline-block;
background-color: rgb(199,199,199);
/* display: flex; */
border: 1px solid rgb(180,196,200);
position: relative;
}
.jd .item{
z-index: 2;
position: absolute;
display: inline-block;
width: 1px;
height: 100%;
background-color:#fff;
/* margin-left: 3px; */
}
#fill{
position: absolute;
/* width: 55%; */
height: 100%;
background-color: rgb(0,204,240);
}
showChild(e) {
console.log(e);
let dom = document.getElementById(e.target.id);
let className = e.target.className;
if (className === 'icon-open') {
dom.classList.replace("icon-open", "icon-close");
} else {
dom.classList.replace("icon-close", "icon-open");
}
console.log(dom.parentNode.children)
let ulDom;
for (let i = 0; i < dom.parentNode.children.length; i++) {
if (dom.parentNode.children[i].tagName === "UL") {
ulDom = dom.parentNode.children[i];
break;
}
}
console.log(ulDom, className);
if (ulDom) {
ulDom.removeAttribute('style');
if (className === 'icon-open') {
ulDom.setAttribute('style', 'display:block');
} else {
ulDom.setAttribute('style', 'display:none');
}
}
}
单要进度条的话就拉取class为jd的部分就好了。
进度条的长度可以直接和百分比挂钩,用起来相对比较轻松。
不同的框架除了语法不同基本其他都一样的。实在不行用原生的也可以很快弄好。
最后再提供另一个进度条比较常规了,思路很简单。
<div class="back-div">
<div class="fill-div" [ngStyle]="{'width':bindWidth}"></div>
</div>
.back-div{
margin: 0 5px;
display: inline-block;
width: 48%;
height: 5px;
border-radius: 5px;
background-color: rgb(240,242,244);
}
.fill-div{
height: 5px;
border-radius: 5px;
}
绑定width就好了,width为百分比就OK。
简单好用哈…