看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS。
做出来的效果如下:
- 拉莫小学
- 一年级
- 一班
- 二班
- 二年级
- 三年级
- 一班
- 二班
- 三班
- 一年级
树的dom结构:
- 拉莫小学
- 一年级
- 一班
- 二班
- 二年级
- 三年级
- 一班
- 二班
- 三班
CSS代码:
/** tree.css zyj 2018.4.21 */ul,li{ list-style-type:none;}.tree{ display:block;position:relative;padding:5px 15px;}.tree span{ display:inline-block;box-sizing:border-box;height:30px;line-height:28px;min-width:60px;text-align:center;color:#888;border:1px solid #ddd;border-radius:5px;padding:0 8px;}.tree ul{ position:relative;padding-left:60px;margin:0;}.tree ul>li{ position:relative;padding:5px 0;}.tree>ul{ padding:0;margin:0;}/** 水平方向连线 */.tree>ul ul>li:after{ content:' ';position:absolute;top:20px;left:-45px;width:45px;border:none;border-top:1px solid #ddd;}/** 垂直方向连线 */.tree ul>li:not(:last-child):before{ content:' ';position:absolute;top:0;left:-45px;height:100%;border:none;border-left:1px solid #ddd;}.tree ul>li:last-child:before{ content:' ';position:absolute;top:0;left:-45px;height:20px;border:none;border-left:1px solid #ddd;}/** 控制鼠标移上去的颜色 */.tree span:hover, .tree span:hover+ul span{ color:#fff;background-color:orange;}.tree span:hover, .tree span:hover+ul span, .tree span:hover+ul li:before, .tree span:hover+ul li:after{ border-color:orange;}/** 折叠图标 */.tree .fa:before{ margin-right:5px;}.tree .fa-minus-circle, .tree .fa-plus-circle{ cursor:pointer;}
里面引的fontawesome图标没法加载进来,导致折叠按钮显示不出,下面是原始树状图的截图:
数据是我用JS加载的,写了个加载数据的tree.js文件,源码如下:
/** tree.js zyj 2018.4.22 */(function(name){ var tree, outer, defaultDateFormat; outer = { setData : setData, }; defaultDateFormat = { unfold : true, name : 'name', childName : 'children' }; function getDataFormat(dataFormat){ var index; if(!dataFormat){ return defaultDateFormat; } for(index in defaultDateFormat){ dataFormat[index] = typeof dataFormat[index] == 'undefined'? defaultDateFormat[index] : dataFormat[index]; } return dataFormat } function initTreeJs(name){ var tree; if(checkTreeNameUsed(name)){ return;} window[name] = outer; initFoldIcon($('.tree')); } function checkTreeNameUsed(name){ if(window[name]){ console.error("The window object name [" + name + "] has been used, tree.js can't be loaded! You can try another name." ); return true; } return false; } function initFoldIcon(target){ target.off('click', 'span>i.fa').on('click', 'span>i.fa', function(e){ var ele = $(e.target); if(ele.hasClass('fa-minus-circle')){ ele.removeClass('fa-minus-circle').addClass('fa-plus-circle').parent().next('ul').hide(200); }else if(ele.hasClass('fa-plus-circle')){ ele.removeClass('fa-plus-circle').addClass('fa-minus-circle').parent().next('ul').show(200); } }) } function getJqueryObjectBySelector(selector){ var ele = $(selector); if(typeof selector != 'string'){ console.error("The first parameter jquery selector [" + selector + "] must be a string!" ); return; } if(!ele.hasClass('tree')){ ele = ele.find('.tree'); } if(ele.length != 1){ console.error("The selector [" + selector + "] expect only one element!" ); return; } return ele; } function setData(selector, data, dataFormat){ var ele = getJqueryObjectBySelector(selector); if(!ele){ return;} if(!data){ return;} if(!data.length){ data = [data]; } dataFormat = getDataFormat(dataFormat); dataFormat.topElement = true; ele.empty().append(getTreeList(data, dataFormat)); initFoldIcon(ele); } function getTreeList(data, dataFormat){ var i, single, name, children, childDataFormat, array = []; childDataFormat = dataFormat.child || dataFormat; if(dataFormat.unfold){ array.push('
- '); }else if(dataFormat.topElement){ dataFormat.topElement = false; array.push('
- '); }else{ array.push('
偷懒没写注释,tree.js中目前只写了一个对外的接口 tree.setData(selector, data, dataFormat) 。参数selector是jQuery选择器,data是数据,dataFormat是数据格式。
比如加载上图的数据:
var dataTest = {name:'拉莫小学', children:[ { name:'一年级', children:[ {name:'一班'}, {name:'二班'} ] }, { name:'二年级' }, { name:'三年级', children:[ {name:'一班'}, {name:'二班'}, {name:'三班'} ] }]};tree.setData('.tree', dataTest);
由于后台加载的数据不一定是按照{name:'*', children:[{name:'*'},...]}这种结构,所以留了dataFormat参数,自己去定义数据格式。
简单举个例子,假如后台数据格式是
var data = { id : '1', title : '百度', url : 'http://www.baidu.com', subWeb : [ { id : '2', title : '百度新闻', url : 'http://news.baidu.com' }, { id : '3', title : '百度知道', url : 'http://zhidao.baidu.com' }, { id : '4', title : '百度图片', url : 'http://image.baidu.com' }, ]}
那么dataFormat可以定义为
var dataFormat = { name : function(data){ return '' + data.title + ''; }, childName : 'subWeb'}
至于效果,读者自己去试咯。