说明
- 基于虚拟dom重写eleTree插件
- 移除layui和jquery,完全基于snabbdom,渲染性能大大优化
- es6加webpack打包,支持import导入,layui导入和CDN直接引入的方式
- 功能包括自定义图标,单选,多选,右键菜单,复制粘贴,懒加载,拖拽,搜索等
本地开发测试
git clone https://github.com/hsiangleev/eleTree.git
cd eleTree
npm install
# 浏览器访问 http://localhost:3000
npm run start
# 生成
npm run build
# vuepress文档在线查看(浏览器访问http://localhost:3001)
npm run docs:start
安装
npm install eletree -D
CDN引入
<!-- js文件 -->
<script src="https://github.com/hsiangleev/eleTree/raw/master//unpkg.com/eletree/dist/eleTree.js"></script>
<!-- 加载字体文件样式 -->
<link rel="stylesheet" href="https://github.com/hsiangleev/eleTree/blob/master//unpkg.com/eletree/dist/css/icon.css"></script>
<!-- 使用图片地址 -->
<!-- imgUrl: "//unpkg.com/eletree/dist/images/" -->
快速开始
<div class="eletree"></div>
var el = eleTree({
el: '.eletree',
url: '/eleTree/json/1.json',
highlightCurrent: true,
showCheckbox: true
})
el.getChecked()
el.on("checkbox", function(data) {
console.log(data)
})
api文档
options属性
基础属性
参数 |
说明 |
类型 |
可选值 |
默认值 |
el |
dom选择器 |
string |
— |
— |
data |
静态数据 |
array |
— |
— |
emptText |
当数据为空时显示的内容 |
string |
— |
暂无数据 |
highlightCurrent |
是否高亮当前选中节点 |
boolean |
— |
false |
defaultExpandAll |
是否默认展开所有节点 |
boolean |
— |
false |
autoExpandParent |
展开子节点的时候是否自动展开父节点 |
boolean |
— |
false |
expandOnClickNode |
是否在点击文本的时候展开或者收缩节点,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点 |
boolean |
— |
true |
checkOnClickNode |
复选框是否在点击文本的时候选中节点 |
boolean |
— |
false |
radioOnClickNode |
单选框是否在点击文本的时候选中节点 |
boolean |
— |
false |
defaultExpandedKeys |
默认展开的节点的 key 的数组 |
array |
— |
— |
showCheckbox |
是否显示checkbox |
boolean |
— |
false |
checkStrictly |
在显示复选框的情况下,是否严格的遵循父子不互相关联的做法 |
boolean |
— |
false |
isDefaultChangePstatus |
在显示复选框并且父子关联的情况下,初始数据是否只是子节点影响父节点,默认false,即父子关联 |
boolean |
— |
false |
defaultCheckedKeys |
默认勾选的节点的 key 的数组 |
array |
— |
— |
accordion |
是否每次只打开一个同级树节点展开(手风琴效果) |
boolean |
— |
false |
indent |
相邻级节点间的水平缩进,单位为像素 |
number |
— |
16 |
showLine |
是否显示虚线 |
boolean |
— |
true |
imgUrl |
图片所在的文件夹路径 |
string |
— |
./images/ |
icon |
使用自定义图标或图片 |
object |
fold,leaf,checkFull,checkHalf,checkNone,dropdownOff,dropdownOn,loading,radioCheck,radioCheckNone |
每个属性默认值均为空字符串 |
done |
树渲染完成之后的回调,参数为data数据 |
function |
— |
— |
lazy |
开启懒加载 |
boolean |
— |
false |
rightMenuList |
开启右键菜单 |
array |
"copy", "paste", "paste_before", "paste_after", "cut_paste", "edit", "remove", "add_child", "add_before", "add_after" |
[] |
showRadio |
是否显示radio |
boolean |
— |
false |
radioType |
单选范围(是同一级还是整体只能选择一个) |
string |
level/all |
level |
defaultRadioCheckedKeys |
radio默认选中项 |
array |
— |
— |
defaultPid |
当使用pid格式的数据时,第一层数据的默认值 |
string/number |
— |
'' |
draggable |
是否开启拖拽节点功能 |
boolean |
— |
false |
customText |
节点文本自定义函数; |
function |
— |
— |
异步属性
参数 |
说明 |
类型 |
可选值 |
默认值 |
url |
异步接口地址 |
string |
— |
— |
method |
接口http请求类型 |
string |
get,post |
get |
where |
接口的其它参数 |
object |
— |
— |
headers |
接口的请求头 |
object |
— |
— |
response |
dom选择器 |
string |
— |
— |
request |
dom选择器 |
string |
— |
— |
方法
方法名 |
说明 |
参数 |
on |
事件回调 |
(type, callback)1.事件名,2.触发事件时的回调函数; |
getChecked |
获取复选框选中的节点信息 |
(leafOnly, includeHalfChecked)1.是否只选中叶子节点,默认false,2.是否包括半选节点,默认false |
setChecked |
设置复选框选中的节点 |
(checkArr, isUnCheckAll)1.设置选中项数组,2.是否先清空原有的选中项,默认true |
unChecked |
取消复选框选中的节点 |
(unCheckArr)1.取消选中的节点数组;不传参数则默认清空所有选中项; |
setAllChecked |
checkbox选中所有节点,除了禁用的节点 |
— |
reverseChecked |
checkbox反选所有节点,除了禁用的节点 |
— |
getRadioChecked |
获取单选框选中的节点信息 |
— |
setRadioChecked |
设置单选框选中的节点 |
(checkArr, isUnCheckAll)1.设置选中项数组,2.是否先清空原有的选中项,默认true |
unRadioChecked |
取消单选框选中的节点 |
(unCheckArr)1.取消选中的节点数组;不传参数则默认清空所有选中项 |
expandAll |
展开所有节点 |
— |
unExpandAll |
合并所有节点 |
— |
append |
添加子节点(有两种格式) |
A. (id, array/object)1.查找需要添加的节点id,2.添加的子节点数据数组;id传null或空字符串则会添加到根节点B. (array/object)只传一个array/object参数则代表传入的为pid格式的数据,即在节点pid下添加子节点 |
updateKeySelf |
更新当前节点数据或移动某些节点(有两种格式) |
A. (id, object)1.查找需要修改的节点id,2.需要修改的数据B. (array/object)只传一个array/object参数则代表传入的为pid格式的数据,即修改id的数据,如果pid改变,则代表移动节点 |
remove |
删除节点数据 |
(removeArr)1.需要删除的节点id数组(可以移除多个节点) |
edit |
编辑节点 |
(id, nodeType)1.需要编辑的节点id, 2. 当前编辑的节点类型,对应触发的回调事件名称,可选值(edit/add_child/add_before/add_after) |
insert |
在某个节点前后插入数据 |
(id, array/object, type)1.查找需要添加的节点id,2.需要添加节点数据数组,3.类型,在当前节点前插入还是节点后插入,可选参数('before','after'),默认节点前 |
reload |
重新渲染树节点 |
(options)1.传入object,参数初始参数一致 |
search |
搜索树节点 |
(value, callback)1.需要搜索的文本信息,2. 传入的搜索条件,函数返回值为true则显示该节点; |
getAllNodeData |
获取所有节点数据 |
('c'/'p') 传入字符串'c'则返回的数据结构为父子结构,传入字符串'p'则返回pid格式的数据,默认为'c' |
copy |
复制节点 |
(id) 1.需要复制的节点id |
cutPaste |
剪贴节点 |
(id) 1.需要剪贴的节点id |
paste |
粘贴节点 |
(id, nodeType) 1.需要粘贴到的节点id,2.粘贴到该节点的位置,可选参数('before','after','children'),默认children |
getClipboardData |
获取剪贴板数据 |
移动或复制或剪贴节点都会把该节点复制到剪贴板,如果剪贴板没有数据,则返回null |
事件
方法名 |
说明 |
回调参数 |
checkbox |
checkbox选择 |
(type, data)1.事件名,2.当前节点数据 |
radio |
radio选择 |
(type, data)1.事件名,2.当前节点数据 |
click |
节点点击 |
(type, data)1.事件名,2.当前节点数据 |
copy |
节点复制 |
(type, data, load, stop)1.事件名,2.当前节点数据, 3. 执行该操作, 4. 取消执行该操作 |
paste |
粘贴到子节点 |
与copy一致 |
paste_before |
粘贴到节点之前 |
与copy一致 |
paste_after |
粘贴到节点之后 |
与copy一致 |
cut_paste |
剪贴节点 |
与copy一致 |
edit |
编辑节点 |
与copy一致 |
remove |
删除节点 |
与copy一致 |
add_child |
添加子节点 |
与copy一致 |
add_before |
添加到节点前 |
与copy一致 |
add_after |
添加到节点后 |
与copy一致 |
custom_ |
自定义事件 |
与copy一致 |
drag |
拖拽事件 |
(type, data, load, stop, endData, range)1.事件名,2.初始移动的节点数据, 3. 执行该操作, 4. 取消执行该操作, 5. 移动到某节点的数据, 6. 移动到节点范围(outer:移动到根节点/inner:移动到子节点) |