原先项目中使用了jquery-ztree作为树形下拉组件,后来因为touch问题和皮肤问题,故自己写了一个,一来可以使用公司ui出的皮肤,二来可以根据数据需求定制逻辑。
datas => {
'name1': {
values:
data: {
'name11': {
values:
data: {...}
}
}
},
'name2': {
values:
data: {
'name21': {
values:
data: {...}
}
}
}
}
options => {
indent: 10, // 缩进
indentUnit: 'px', // 缩进单位
checkable: true, // 是否可选
checkval: 'id', //
showfile: true, //开启则去判断isfile
event: {
click: function (node, state, e){}, // 点击时触发回调
dblclick: function (node, state, e){} //
}
}
options: {
el: '#rz-book-tree',
showfile: false,
autosort: true,
title: 'name',
filekey: '',
filevalue: 1,
sortconfig: {
idKey: 'id',
pidKey: 'pId',
rootId: 0
}
}
var file_data = data// 数据
var my_tree = new tree({
options: {
el: '#tree',
showfile: true,
autosort: true,
title: 'dirname',
sortconfig:{
idKey: 'id',
pidKey: 'parentdir',
rootId: 0
},
event: {
click: function (node, state, e){
// 业务逻辑
},
dblclick: function(node, state, e){
// 业务逻辑
}
}
},
datas: file_data
})
var my_tree = new tree(config)
config参数说明
key
des
default
datas
传入tree的数据
不能为空
options
传入的配置文件
key
des
default
autosort
是否需要代码进行自动排序
false
sortconfig
排序需要定义的关键字
indent
缩进
10
indentUnit
缩进的单位,可以适用于rem,按项目需求来
px
checkable
是否显示checkbox
false
checkval
选中的checkbox的值
false
showfile
是否显示文件的样式 【true时回去判断datas中filekey的字段】
false
filekey
声明是文件的键名,可以根据业务需求自定义
isFile
filevalue
当filekey的值与filevalue的值相同时,则判断为文件,而非文件夹
2
event
事件列表
false
config.option.sortconfig
sortconfig说明
key
des
default
idKey
当前节点的id键名
id
pidKey
父节点的pid键名
pid
rootId
根节点的值
0
config.option.event
event说明
key
des
default
click
单机事件
dblclick
双击事件,可以自己用jq写一个doubleTap的移动端双击事件,以兼容移动端
node getCheckedObj()
得到当前选中的节点
array getAllSelectVal()
得到复选框勾选中的所有val
node
点击的节点对象
state
节点状态 true open,false close
e
event对象
append
正序插入节点
insert
倒叙插入节点
replace
替换所有子节点
open
打开当前节点
close
关闭节点
toggle
打开关闭子节点
现在的代码可能存在内存泄露的问题,目前没时间优化,等下次再看,找到bug的童鞋欢迎issue,喜欢的同学请star一下。