ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-08 13:22:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

完成多级目录

Browse Source
This commit is contained in:
augushong
2021-04-07 23:52:33 +08:00
parent 2fb658d085
commit d5baf8d810
3 changed files with 254 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
demo/tree.html
View File

@@ -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 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>
<pre class="layui-code demo-js"></pre> </div>
<script class="demo-js-src"> </div>
var tree = [ </div>
{
title: '读书笔记',
children: [
{
title: '小说'
}
],
data: {}
},
{
title: '技术笔记',
children: [
{
title: 'MYSQL',
},
{
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)
})
} </div>
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>

21
public/cdn/layui-ul.css
View File

@@ -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 {

140
public/static/css/common.css
View File

@@ -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;
}