mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-08 13:22:47 +08:00
完成多级目录
This commit is contained in:
augushong
322
demo/tree.html
322
demo/tree.html
@@ -7,179 +7,191 @@
|
|||||||
需要自己写出目录收缩逻辑
|
需要自己写出目录收缩逻辑
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-tree">
|
<div class="ul-tree">
|
||||||
<div class="ul-tree-item" data-level="0">
|
<div class="ul-tree-item">
|
||||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
<div class="ul-tree-item-info">
|
||||||
<span class="ul-tree-item-title">读书笔记</span>
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">读书笔记</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info current">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">小说</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-tree-item current" data-level="1">
|
<div class="ul-tree-item">
|
||||||
<span class="ul-tree-item-title">小说</span>
|
<div class="ul-tree-item-info">
|
||||||
</div>
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
<div class="ul-tree-item" data-level="0">
|
<span class="ul-tree-item-title">技术笔记</span>
|
||||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
</div>
|
||||||
<span class="ul-tree-item-title">技术笔记</span>
|
<div class="ul-tree-item-children">
|
||||||
</div>
|
<div class="ul-tree-item">
|
||||||
<div class="ul-tree-item" data-level="1">
|
<div class="ul-tree-item-info">
|
||||||
<span class="ul-tree-item-title">Mysql</span>
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
</div>
|
<span class="ul-tree-item-title">Mysql</span>
|
||||||
<div class="ul-tree-item" data-level="1">
|
</div>
|
||||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
<div class="ul-tree-item-children">
|
||||||
<span class="ul-tree-item-title">PHP</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-tree-item" data-level="2">
|
</div>
|
||||||
<span class="ul-tree-item-title">扩展</span>
|
<div class="ul-tree-item">
|
||||||
</div>
|
<div class="ul-tree-item-info">
|
||||||
<div class="ul-tree-item" data-level="2">
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
<span class="ul-tree-item-title">框架</span>
|
<span class="ul-tree-item-title">PHP</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-tree-item" data-level="2">
|
<div class="ul-tree-item-children">
|
||||||
<span class="ul-tree-item-title">库</span>
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">扩展</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">框架</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<pre class="layui-code demo-js"></pre>
|
<pre class="layui-code demo-js"></pre>
|
||||||
<script class="demo-js-src">
|
<script class="demo-js-src">
|
||||||
// 需要用以下代码整理缩进
|
// 可以用以下代码整理元素
|
||||||
$('.ul-tree-item').each(function () {
|
$('.ul-tree-item').each(function () {
|
||||||
$(this).find('.ul-tree-item-title').css('margin-left', ($(this).data('level') + 1) * 15 + 'px')
|
var itemTree = this
|
||||||
$(this).find('.ul-tree-item-icon').css('left', ($(this).data('level') + 1) * 15 - 10 + 'px')
|
var parents = $(itemTree).parents('.ul-tree-item')
|
||||||
|
var level = parents.length
|
||||||
|
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
|
||||||
|
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
|
||||||
|
|
||||||
|
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
|
||||||
|
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
$(itemTree).children('.ul-tree-item-info').click(function (e) {
|
||||||
|
if ($(e.target).hasClass('ul-tree-item-icon')) {
|
||||||
|
var iconItem = e.target
|
||||||
|
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
|
||||||
|
// 收缩
|
||||||
|
$(iconItem).removeClass('layui-icon-triangle-d')
|
||||||
|
$(iconItem).addClass('layui-icon-triangle-r')
|
||||||
|
|
||||||
|
$(itemTree).children('.ul-tree-item-children').hide()
|
||||||
|
} else {
|
||||||
|
// 展开
|
||||||
|
$(iconItem).addClass('layui-icon-triangle-d')
|
||||||
|
$(iconItem).removeClass('layui-icon-triangle-r')
|
||||||
|
|
||||||
|
$(itemTree).children('.ul-tree-item-children').show()
|
||||||
|
}
|
||||||
|
console.log('点击收缩目录');
|
||||||
|
// 一般不用写这个逻辑
|
||||||
|
}else{
|
||||||
|
console.log('点击目录项');
|
||||||
|
// 在这里写点击逻辑
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>动态生成</legend>
|
<legend>基本组件</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div>
|
<div>
|
||||||
其实在生成目录时,只需要一个简单地上下级关系和正确的level层级,很容易写出收缩逻辑.
|
最基本的组件,ul-tree-item-icon的按钮会在执行js后进行相应的移除,缩进样式也许需要执行js
|
||||||
<br>
|
|
||||||
但是如果不愿意写更多的js逻辑,那么你可以生成一个多层级关系的json,然后把js的逻辑复制走,就像下面的代码一样
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-tree" id="js-tree">
|
<div class="ul-section">
|
||||||
|
<div class="ul-tree">
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">读书笔记</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ul-section">
|
||||||
<div>
|
<div class="ul-tree">
|
||||||
<pre class="layui-code demo-js"></pre>
|
<div class="ul-tree-item">
|
||||||
<script class="demo-js-src">
|
<div class="ul-tree-item-info">
|
||||||
var tree = [
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
{
|
<span class="ul-tree-item-title">读书笔记</span>
|
||||||
title: '读书笔记',
|
</div>
|
||||||
children: [
|
<div class="ul-tree-item-children">
|
||||||
{
|
<div class="ul-tree-item">
|
||||||
title: '小说'
|
<div class="ul-tree-item-info">
|
||||||
}
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
],
|
<span class="ul-tree-item-title">小说</span>
|
||||||
data: {}
|
</div>
|
||||||
},
|
<div class="ul-tree-item-children">
|
||||||
{
|
|
||||||
title: '技术笔记',
|
</div>
|
||||||
children: [
|
</div>
|
||||||
{
|
</div>
|
||||||
title: 'MYSQL',
|
</div>
|
||||||
},
|
|
||||||
{
|
</div>
|
||||||
title: 'PHP',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '扩展'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '框架'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '库'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '文档'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
function toggleTree(iconItem, isShow) {
|
|
||||||
if (isShow) {
|
|
||||||
$('.ul-tree-item-pkey-' + $(iconItem).closest('.ul-tree-item').data('key')).show()
|
|
||||||
} else {
|
|
||||||
$('.ul-tree-item-pkey-' + $(iconItem).closest('.ul-tree-item').data('key')).hide()
|
|
||||||
}
|
|
||||||
$('.ul-tree-item-pkey-' + $(iconItem).closest('.ul-tree-item').data('key')).each(function () {
|
|
||||||
toggleTree($(this).find('.ul-tree-item-icon'), isShow)
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
function renderTree(tree, target, level) {
|
|
||||||
|
|
||||||
if (typeof level == 'undefined') {
|
|
||||||
level = 0
|
|
||||||
}
|
|
||||||
tree.forEach(function (treeItem, index) {
|
|
||||||
// console.log(treeItem);
|
|
||||||
var treeHtml = '<div class="ul-tree-item">' +
|
|
||||||
'<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>' +
|
|
||||||
'<span class="ul-tree-item-title"></span>' +
|
|
||||||
'</div>'
|
|
||||||
var treeHtmlDom = $(treeHtml)
|
|
||||||
|
|
||||||
treeItem.key = Math.random().toString(36).slice(-6);
|
|
||||||
treeHtmlDom.data(treeItem)
|
|
||||||
treeHtmlDom.addClass('ul-tree-item-key-' + treeItem.key)
|
|
||||||
|
|
||||||
if (level == 0) {
|
|
||||||
treeHtmlDom.appendTo(target)
|
|
||||||
} else {
|
|
||||||
var pItemKey = 'ul-tree-item-pkey-' + target.data('key')
|
|
||||||
treeHtmlDom.addClass(pItemKey)
|
|
||||||
if ($('.' + pItemKey).length > 0) {
|
|
||||||
treeHtmlDom.insertAfter($('.' + pItemKey).last())
|
|
||||||
} else {
|
|
||||||
treeHtmlDom.insertAfter(target)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
treeHtmlDom.find('.ul-tree-item-title').text(treeItem.title)
|
|
||||||
|
|
||||||
treeHtmlDom.find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 'px')
|
|
||||||
treeHtmlDom.find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 10 + 'px')
|
|
||||||
|
|
||||||
treeHtmlDom.click(function (e) {
|
|
||||||
|
|
||||||
if ($(e.target).hasClass('ul-tree-item-icon')) {
|
|
||||||
console.log('点击收缩');
|
|
||||||
|
|
||||||
if ($(e.target).hasClass('layui-icon-triangle-d')) {
|
|
||||||
// 收缩
|
|
||||||
$(e.target).removeClass('layui-icon-triangle-d')
|
|
||||||
$(e.target).addClass('layui-icon-triangle-r')
|
|
||||||
toggleTree(e.target, false)
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// 展开
|
|
||||||
$(e.target).addClass('layui-icon-triangle-d')
|
|
||||||
$(e.target).removeClass('layui-icon-triangle-r')
|
|
||||||
toggleTree(e.target, true)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
console.log('点击');
|
|
||||||
console.log($(this).data())
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (typeof treeItem.children != "undefined") {
|
|
||||||
renderTree(treeItem.children, treeHtmlDom, level + 1)
|
|
||||||
} else {
|
|
||||||
treeHtmlDom.find('.ul-tree-item-icon').remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
renderTree(tree, '#js-tree')
|
|
||||||
</script>
|
|
||||||
</div>
|
</div>
|
||||||
|
<pre class="layui-code demo-js"></pre>
|
||||||
|
<div class="demo-js-src">
|
||||||
|
<!-- 基本组件 -->
|
||||||
|
<div class="ul-tree">
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">读书笔记</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 子目录只需要将ul-tree-item嵌套在ul-tree-item-children即可 -->
|
||||||
|
<div class="ul-tree">
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">读书笔记</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">小说</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@@ -522,21 +522,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ul-tree-item {
|
.ul-tree-item {
|
||||||
padding : 8px;
|
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
position : relative;
|
cursor: pointer;
|
||||||
border-left : 3px solid transparent;
|
|
||||||
cursor : pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul-tree-item:hover,
|
.ul-tree-item-info {
|
||||||
.ul-tree-item.current {
|
border-left: 3px solid transparent;
|
||||||
|
padding : 8px 0;
|
||||||
|
position : relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ul-tree-item-info.current {
|
||||||
background-color: #9cf;
|
background-color: #9cf;
|
||||||
border-color : #6699CC;
|
border-color : #6699CC;
|
||||||
}
|
}
|
||||||
|
.ul-tree-item-info:hover{
|
||||||
|
background-color: rgb(190, 222, 255);
|
||||||
|
border-color : #6699CC;
|
||||||
|
}
|
||||||
|
|
||||||
.ul-tree-item-title {
|
.ul-tree-item-title {
|
||||||
margin-left: 15px;
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul-tree-item-icon {
|
.ul-tree-item-icon {
|
||||||
|
|||||||
@@ -1,114 +1,118 @@
|
|||||||
|
.left-bottom-options {
|
||||||
|
position : fixed;
|
||||||
.left-bottom-options{
|
left : 20px;
|
||||||
position: fixed;
|
bottom : 60px;
|
||||||
left: 20px;
|
background: rgba(0, 0, 0, 0.4);
|
||||||
bottom: 60px;
|
color : #fff;
|
||||||
background: rgba(0,0,0,0.4);
|
font-size : 35px;
|
||||||
color: #fff;
|
padding : 3px 5px;
|
||||||
font-size: 35px;
|
|
||||||
padding: 3px 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-table img {
|
.layui-table img {
|
||||||
max-width: 60px;
|
max-width : 60px;
|
||||||
max-height: 60px;
|
max-height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card-box{
|
.table-card-box {
|
||||||
margin-top: 15px;
|
margin-top : 15px;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
padding: 15px 5px;
|
padding : 15px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card-item{
|
.table-card-item {
|
||||||
|
|
||||||
margin-top: 5px;
|
margin-top : 5px;
|
||||||
display: flex;
|
display : flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items : flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card-item img{
|
.table-card-item img {
|
||||||
max-width: 60px;
|
max-width : 60px;
|
||||||
max-height: 60px;
|
max-height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card-item .item-title{
|
.table-card-item .item-title {
|
||||||
padding: 5px;
|
padding : 5px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 20%;
|
width : 20%;
|
||||||
}
|
}
|
||||||
.table-card-item .item-value{
|
|
||||||
padding: 5px;
|
.table-card-item .item-value {
|
||||||
margin: 5px;
|
padding : 5px;
|
||||||
background-color: #fff;
|
margin : 5px;
|
||||||
min-width: 80%;
|
background-color: #fff;
|
||||||
white-space: normal;
|
min-width : 80%;
|
||||||
word-break: break-all;
|
white-space : normal;
|
||||||
|
word-break : break-all;
|
||||||
}
|
}
|
||||||
.layui-form-radio{
|
|
||||||
|
.layui-form-radio {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.quick-input-item{
|
.quick-input-item {
|
||||||
width: 120px;
|
width : 120px;
|
||||||
margin: 3px 0;
|
margin: 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-input-item.sm-quick-input-item .layui-btn{
|
.quick-input-item.sm-quick-input-item .layui-btn {
|
||||||
line-height: 24px;
|
|
||||||
height: 24px;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 0 12px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-input-item.sm-quick-input-item .layui-input{
|
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
height: 24px;
|
height : 24px;
|
||||||
|
font-size : 12px;
|
||||||
|
padding : 0 12px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul-flex{
|
.quick-input-item.sm-quick-input-item .layui-input {
|
||||||
|
line-height: 24px;
|
||||||
|
height : 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-editor pre.ql-syntax{
|
.ql-snow .ql-editor pre.ql-syntax {
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px){
|
@media screen and (max-width: 768px) {
|
||||||
.layui-body{
|
.layui-body {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layout-admin .layui-footer{
|
.layui-layout-admin .layui-footer {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layout-admin .layui-logo{
|
.layui-layout-admin .layui-logo {
|
||||||
width: 115px;
|
width: 115px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layout-admin .layui-side{
|
.layui-layout-admin .layui-side {
|
||||||
width: 100%;
|
width : 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
height: 100%;
|
height : 100%;
|
||||||
position: unset;
|
position : unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-layer-content .layui-hide-xs{
|
.layui-layer-content .layui-hide-xs {
|
||||||
display: unset !important;
|
display: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-nav-tree{
|
.layui-nav-tree {
|
||||||
width: 100%;
|
width : 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-js-src {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user