CSS实现树形结构 + js加载数据

Posted 2020-11-01 GH_军

  看到一款树形结构，比较喜欢它的样式，就参照它的外观自己做了一个，练习一下CSS。

  做出来的效果如下：

• 拉莫小学
  • 一年级
    • 一班
    • 二班
  • 二年级
  • 三年级
    • 一班
    • 二班
    • 三班

树的dom结构：

<div class="tree">
    <ul>
        <li>
            <span><i class="fa fa-minus-circle"></i>拉莫小学</span>
            <ul>
                <li>
                    <span><i class="fa fa-minus-circle"></i>一年级</span>
                    <ul>
                        <li><span>一班</span></li><li><span>二班</span></li>
                    </ul>
                </li>
                <li>
                    <span>二年级</span>
                </li>
                <li>
                    <span><i class="fa fa-minus-circle"></i>三年级</span>
                    <ul>
                        <li><span>一班</span></li>
                        <li><span>二班</span></li>
                        <li><span>三班</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

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(\'<ul>\');
        }else if(dataFormat.topElement){
            dataFormat.topElement = false;
            array.push(\'<ul>\');
        }else{
            array.push(\'<ul style="display:none;">\');
        }
        for(i=0; i<data.length; i++){
            single = data[i];
            if(typeof dataFormat.name == \'function\'){
                name = dataFormat.name(single);
            }else if(typeof dataFormat.name == \'string\'){
                name = single[dataFormat.name];
            }else{
                name = single[\'name\'];
            }
            if(typeof dataFormat.childName == \'string\'){
                children = single[dataFormat.childName];
            }else{
                children = single[\'children\'];
            }
            array.push(\'<li>\');
            array.push(\'<span>\');
            if(children && children.length > 0){
                if(dataFormat.unfold){
                    array.push(\'<i class="fa fa-minus-circle"></i>\');
                }else{
                    array.push(\'<i class="fa fa-plus-circle"></i>\');
                }
                array.push(name);
                array.push(\'</span>\');
                array.push(getTreeList(children, childDataFormat));
            }else{
                array.push(name);
                array.push(\'</span>\');
            }
            array.push(\'</li>\');
        }
        array.push(\'</ul>\');
        return array.join(\'\');
    }
    
    initTreeJs(name);
}(\'tree\'))

偷懒没写注释，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 \'<a href="\' + data.url + \'">\' + data.title + \'</a>\';
    },
    childName : \'subWeb\'
}

至于效果，读者自己去试咯。