mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 10:32:49 +08:00
283 lines
7.6 KiB
HTML
283 lines
7.6 KiB
HTML
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>简约目录</legend>
|
|
<div class="layui-field-box">
|
|
<div>
|
|
直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式
|
|
<br>
|
|
需要自己写出目录收缩逻辑
|
|
</div>
|
|
<div>
|
|
引用js: <a href="//layui.ulthon.com/cdn/js/tree.js" target="_blank">//layui.ulthon.com/cdn/js/tree.js</a>
|
|
</div>
|
|
<script src="/cdn/js/tree.js"></script>
|
|
<div class="ul-bg-gray ul-padding-md">
|
|
<div class="ul-tree">
|
|
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<pre class="layui-code demo-js"></pre>
|
|
<script class="demo-js-src">
|
|
// 例子:
|
|
var tree = new renderUlTree({
|
|
elem: '.ul-tree',
|
|
list: [
|
|
{
|
|
id: 1,
|
|
title: '读书笔记',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '科幻小说',
|
|
pid: 1
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '成功学',
|
|
pid: 1
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '技术笔记',
|
|
pid: 0
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Mysql',
|
|
pid: 4
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'PHP',
|
|
pid: 4
|
|
},
|
|
{
|
|
id: 7,
|
|
title: 'UlthonAdmin',
|
|
pid: 4
|
|
},
|
|
]
|
|
})
|
|
|
|
tree.itemUpdate({
|
|
id: 1,
|
|
title: '读书笔记改名'
|
|
})
|
|
|
|
var list = tree.getList();
|
|
console.log(list);
|
|
|
|
</script>
|
|
</div>
|
|
<div>
|
|
|
|
<table class="layui-table">
|
|
<thead>
|
|
<tr>
|
|
<th>参数</th>
|
|
<th>说明</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>elem</td>
|
|
<td>必填,元素名</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onItemClick</td>
|
|
<td>
|
|
<p>目录点击回调:function(item,e){},</p>
|
|
<p>item:目录的Dom,可以通过$(item).data()获取原始数据</p>
|
|
<p>e是点击的原始事件</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onItemToggle</td>
|
|
<td>
|
|
<p>目录展开收缩回调:function(item,e){},</p>
|
|
<p>item:目录的Dom,可以通过$(item).data()获取原始数据</p>
|
|
<p>e是点击的原始事件</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>options</td>
|
|
<td>
|
|
<p>每个目录的设置项</p>
|
|
<p>
|
|
完整参数:
|
|
<br>
|
|
{
|
|
type: 'up', //必填
|
|
className:'layui-icon layui-icon-set',
|
|
html:'',
|
|
},
|
|
</p>
|
|
<p>未设置html时会自动根据className和Type自动生成</p>
|
|
<p>默认支持type:up,down/delete</p>
|
|
<p>不需要请设置空数组</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onOptionTrigger</td>
|
|
<td>
|
|
<p>设置点击回调:function (type, item, e){}</p>
|
|
<p>
|
|
type:设置的类型
|
|
</p>
|
|
<p>
|
|
item:目录的Dom,可以通过$(item).data()获取原始数据
|
|
</p>
|
|
<p>
|
|
e:点击的原始事件
|
|
</p>
|
|
<p>
|
|
如果不设置回调,会自动调用上移/下移/删除操作
|
|
</p>
|
|
<p>
|
|
如果设置回调,需要自行调用
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list</td>
|
|
<td>
|
|
<p>目录数据,示例:</p>
|
|
<p>
|
|
[{
|
|
id: 0,
|
|
pid: 0,
|
|
title: 0,
|
|
options: 同列表设置,如果不需要请设置为空数组
|
|
}]
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="layui-table">
|
|
<thead>
|
|
<tr>
|
|
<th>方法</th>
|
|
<th>说明</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>itemMoveUp(item)</td>
|
|
<td>
|
|
<p>将目录向上移动,没有返回值</p>
|
|
<p>参数:</p>
|
|
<p>item:目录的Dom,onOptionTrigger的第二个参数</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>itemMoveDown(item)</td>
|
|
<td>
|
|
<p>将目录向下移动,没有返回值</p>
|
|
<p>参数:</p>
|
|
<p>item:目录的Dom,onOptionTrigger的第二个参数</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>itemDelete(id)</td>
|
|
<td>
|
|
<p>将目录向下移动,没有返回值</p>
|
|
<p>
|
|
参数:
|
|
</p>
|
|
<p>
|
|
id:目录的id
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>itemUpdate(data)</td>
|
|
<td>
|
|
<p>将目录向下移动,没有返回值</p>
|
|
<p>
|
|
参数:
|
|
</p>
|
|
<p>
|
|
data:list的其中一个目录数据,必须有id属性
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>getList()</td>
|
|
<td>
|
|
<p>将目录向下移动,没有参数</p>
|
|
<p>
|
|
返回示例:
|
|
</p>
|
|
<p>
|
|
[
|
|
{
|
|
id: 0, <br>
|
|
pid: 0, <br>
|
|
title: 0, <br>
|
|
options: 同列表设置,如果不需要请设置为空数组, <br>
|
|
index:0 //多了一个index属性,是这个目录在当前分组中的排序 <br>
|
|
}
|
|
]
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>文档目录</legend>
|
|
<div class="layui-field-box">
|
|
<div class="ul-bg-black">
|
|
<div class="ul-doc-info-page">
|
|
<div class="ul-doc-info-page-list">
|
|
<div class="ul-doc-info-page-item page level-0">
|
|
文章标题
|
|
</div>
|
|
<div class="ul-doc-info-page-item page level-0">
|
|
文章标题
|
|
</div>
|
|
<div class="ul-doc-info-page-item group level-0">
|
|
文章分组
|
|
</div>
|
|
<div class="ul-doc-info-page-item page level-1">
|
|
二级文章标题
|
|
</div>
|
|
<div class="ul-doc-info-page-item page level-1">
|
|
二级文章标题
|
|
</div>
|
|
<div class="ul-doc-info-page-item point level-2">
|
|
文章内部锚点
|
|
</div>
|
|
<div class="ul-doc-info-page-item point level-2">
|
|
文章内部锚点
|
|
</div>
|
|
<div class="ul-doc-info-page-item group level-0">
|
|
文章分组
|
|
</div>
|
|
<div class="ul-doc-info-page-item page level-1">
|
|
二级文章标题
|
|
</div>
|
|
<div class="ul-doc-info-page-item page level-1">
|
|
二级文章标题
|
|
</div>
|
|
<div class="ul-doc-info-page-item point level-2">
|
|
文章内部锚点
|
|
</div>
|
|
<div class="ul-doc-info-page-item point level-2">
|
|
文章内部锚点
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
这个样式不适合做复杂的特效,比如展开收缩/上移下移.用来展示就好.
|
|
</div>
|
|
</div>
|
|
</fieldset> |