console 命令行工具 X clear

console

$(function () {

var treeJson = {
  id: 'root',
  label: '商品分类',
  open: true,
  children: [
    {
      id: '1',
      label: '建材',
      children: [
        {
          id: '1.1',
          label: '壁纸',
          children: [
            {
              id: '1.1.1',
              label: '无纺布',
            },
            {
              id: '1.1.2',
              label: '织物类',
            },
            {
              id: '1.1.3',
              label: '纯纸类',
            }
          ]
        },
        {
          id: '1.2',
          label: '墙布',
          children: [
            {
              id: '1.2.1',
              label: '墙布1',
            },
            {
              id: '1.2.2',
              label: '墙布2',
            },
            {
              id: '1.2.3',
              label: '墙布3',
            }
          ]
        }
      ]
    },
    {
      id: '2',
      label: '家具',
      open: true,
      children: [
        {
          id: '2.1',
          label: '墙布1',
        },
        {
          id: '2.2',
          label: '墙布2',
          children: [
            {
              id: '2.2.1',
              label: '墙布1',
            },
            {
              id: '2.2.2',
              label: '墙布2',
              children: [
                {
                  id: '2.2.2.1',
                  label: '墙布1',
                },
                {
                  id: '2.2.2.2',
                  label: '墙布2',
                },
                {
                  id: '2.2.2.3',
                  label: '墙布3',
                }
              ]
            },
            {
              id: '2.2.3',
              label: '墙布3',
            }
          ]
        },
        {
          id: '2.3',
          label: '墙布3',
        }
      ]
    },
    {
      id: '3',
      label: '其他',
      children: [
        {
          id: '3.',
          label: '墙布1',
        },
        {
          id: '3.2',
          label: '墙布2',
        },
        {
          id: '3.3',
          label: '墙布3',
        }
      ]
    }
  ]
}
$('#tree-panel').ckTree(treeJson)

})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树控件</title>
</head>
<body>
<div class="container">
    <div id="tree-panel">
    </div>
</div>
</body>
</html>

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}

#tree-panel {
    margin: 50px;
    background-color: #fff;
}

.tree {
    font-size: 13px;
    color: #333;
    background-size: 100% 100px;
    user-select: none;
}

.tree li {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
    white-space: nowrap;
    outline: 0;
}

.tree li > i {
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 12px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    border: 0 none;
    outline: none;
    cursor: pointer;
    background: transparent url("http://oryf535qu.bkt.clouddn.com/tree.png") no-repeat scroll;
}

.tree li > a {
    padding: 0 5px;
    margin: 0;
    cursor: pointer;
    height: 24px;
    line-height: 24px;
    color: #333;
    background-color: transparent;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    border-radius: 5px;
    transition: background-color .3s;
}

.tree li.file > a:hover {
    background-color: #e7f4f9;
}

.tree li.file > a.active {
    background-color: #beebff;
}

.tree li ul {
    margin: 0;
    padding-left: 18px;
    overflow: hidden;
}

.tree li ul li ul {
    background: url("http://oryf535qu.bkt.clouddn.com/line_conn.png") -4px 0 repeat-y;
}

.tree li ul li:last-child > ul {
    background: none;
}

.tree li.fold.open.root > i {
    background-position: -40px -166px !important;
}

.tree li.fold.open > i {
    background-position: -40px -64px;
}

.tree li.fold.open > ul {
    /*display: block;*/
}

.tree li.fold.open:last-child > i {
    background-position: -40px -115px;
}

.tree li.fold.close.root > i {
    background-position: -66px -166px !important;
}

.tree li.fold.close > i {
    background-position: -66px -64px;
}

.tree li.fold.close > ul {
    /*display: none;*/
    height: 0;
}

.tree li.fold.close:last-child > i {
    background-position: -66px -115px;
}

.tree li.file > i {
    background-position: -5px -64px;
}

.tree li.file:last-child > i {
    background-position: -5px -115px;
}

SOURCE

本项目引用的自定义外部资源