首页 树形组件


简约目录
直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式
需要自己写出目录收缩逻辑

      
    
参数 说明
elem 必填,元素名
onItemClick

目录点击回调:function(item,e){},

item:目录的Dom,可以通过$(item).data()获取原始数据

e是点击的原始事件

onItemToggle

目录展开收缩回调:function(item,e){},

item:目录的Dom,可以通过$(item).data()获取原始数据

e是点击的原始事件

options

每个目录的设置项

完整参数:
{ type: 'up', //必填 className:'layui-icon layui-icon-set', html:'', },

未设置html时会自动根据className和Type自动生成

默认支持type:up,down/delete

不需要请设置空数组

onOptionTrigger

设置点击回调:function (type, item, e){}

type:设置的类型

item:目录的Dom,可以通过$(item).data()获取原始数据

e:点击的原始事件

如果不设置回调,会自动调用上移/下移/删除操作

如果设置回调,需要自行调用

list

目录数据,示例:

[{ id: 0, //必须
pid: 0,
title: 0,
options: 同列表设置,如果不需要请设置为空数组
}]

方法 说明
appendItem(item)

将目录向上移动,没有返回值

参数:

item:list的其中一个目录数据,必须有id属性

renderList()

当调用了appendItem之后,必须调用renderList,才能显示,没有参数

itemMoveUp(item)

将目录向上移动,没有返回值

参数:

item:目录的Dom,onOptionTrigger的第二个参数

itemMoveDown(item)

将目录向下移动,没有返回值

参数:

item:目录的Dom,onOptionTrigger的第二个参数

itemDelete(id)

将目录向下移动,没有返回值

参数:

id:目录的id

itemUpdate(data)

将目录向下移动,没有返回值

参数:

data:list的其中一个目录数据,必须有id属性

getList()

将目录向下移动,没有参数

返回示例:

[ { id: 0,
pid: 0,
title: 0,
options: 同列表设置,如果不需要请设置为空数组,
index:0 //多了一个index属性,是这个目录在当前分组中的排序
} ]

文档目录
文章标题
文章标题
文章分组
二级文章标题
二级文章标题
文章内部锚点
文章内部锚点
文章分组
二级文章标题
二级文章标题
文章内部锚点
文章内部锚点
这个样式不适合做复杂的特效,比如展开收缩/上移下移.用来展示就好.