示例链接
eleTree.render({
elem: '.ele1',
data: [
{
id: 1,
label: "安徽省",
children: [
{
id: 2,
label: "马鞍山市",
disabled: true,
children: [
{
id: 3,
label: "和县",
},
{
id: 4,
label: "花山区",
}
]
}
]
},
{
id: 5,
label: "河南省",
children: [
{
id: 6,
label: "郑州市"
}
]
}
],
showCheckbox: true,
});
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| elem | String/DOM | 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 | ".ele" |
| data | Array | 直接赋值数据 | [{},{},...] |
| emptText | String | 当数据为空时现实的内容 | 暂无数据 |
| url | String | 异步数据接口 | 异步数据 |
| renderAfterExpand | Boolean | 是否在第一次展开某个树节点后才渲染其子节点 | true |
| highlightCurrent | Boolean | 是否高亮当前选中节点,默认值是 false。 | false |
| defaultExpandAll | Boolean | 是否默认展开所有节点 | false |
| expandOnClickNode | Boolean | 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | true |
| checkOnClickNode | Boolean | 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。 | false |
| defaultExpandedKeys | Array | 默认展开的节点的 key 的数组 | [23,24] |
| autoExpandParent | Boolean | 展开子节点的时候是否自动展开父节点 | true |
| showCheckbox | Boolean | 节点是否可被选择 | false |
| checkStrictly | Boolean | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false | false |
| defaultCheckedKeys | Array | 默认勾选的节点的 key 的数组 | [22] |
| accordion | Boolean | 是否每次只打开一个同级树节点展开(手风琴效果) | false |
| indent | Number | 相邻级节点间的水平缩进,单位为像素 | 16 |
| lazy | Boolean | 是否懒加载子节点,需与 load 方法结合使用。
注意:懒加载 > 展开所有 > 初始展开项 > 初始渲染所有子节点 > 初始选中项 > 每次点击只渲染当前层(默认)
即 1. 如开启懒加载,则不会展开所有,每次只渲染当前层;2. 若初始有展开项或选中项,则会直接渲染所有子节点
|
false |
| load | Function | 加载子树数据的方法,仅当 lazy 属性为true 时生效 | |
| draggable | Boolean | 是否开启拖拽节点功能 | false |
| contextmenuList | Array | 1. 启用右键菜单,内置的操作有:"copy","add","edit","remove"
2. 如果需要异步操作节点,则可以使用".async"做后缀,如"add.async,edit.async,remove.async",这种方式必需主动在触发的事件中调用相关的方法,不调用则不生效
add.async需调用d.setData(),edit.async和remove.async则需调用d.async()
3. 增加自定义菜单功能,如传入对象{eventName: "test", text: "test"},简写为字符串test,eventName代表回调事件名,node加eventName的首字母大写,例如(nodeTest),text为右键显示的文字
|
["copy","add","edit","remove"] |
| searchNodeMethod | Function | 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 | function(value,data) { if (!value) return true; return data.label.indexOf(value) !== -1; } |
| showLine | Boolean | 是否显示连线,默认false | false |
| 参数 | 功能 |
|---|---|
| url | 异步数据接口 |
| method | 接口http请求类型,默认:get |
| where | 接口的其它参数。如:where: {token: 'sasasas', id: 123} |
| contentType | 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json' |
| headers | 接口的请求头。如:headers: {token: 'sasasas'} |
| request | 对于后台数据重新定义名字
eleTree.render({
// ...
// 默认
request: {
name: "label",
key: "id",
children: "children",
checked: "checked",
disabled: "disabled",
isLeaf: "isLeaf"
}
})
|
| response | 对后台返回的数据格式重新定义
eleTree.render({
// ...
// 默认
response: {
statusName: "code",
statusCode: 0,
dataName: "data"
}
})
|
| done | 数据请求完成的回调函数,只有异步请求才会有
eleTree.render({
// ...
done: function(res){
// res即为你接口返回的信息。
console.log(res);
}
})
|
var el=eleTree.render({
// ...
})
> el.updateKeyChildren(key,data) // 更新子节点
> el.updateKeySelf(key,data) //更新当前节点
> el.getChecked(leafOnly, includeHalfChecked) // 获取选中的节点,接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false
> el.setChecked(arr,isReset) //设置选中的节点,传入数组key值,isReset:是否重新设置选中项,默认false,若为false,则在原有的选中基础上增加选中项
> el.unCheckNodes() //取消所有选中的节点
> el.unCheckArrNodes(arr) //取消部分选中的节点,arr为id组成的数组,如果父子节点同时选中,并且checkStrictly不为true,如果要取消子节点选中,则arr需包含父节点id,即需同时取消父节点选中
> el.expandAll() //展开所有
> el.unExpandAll() //合并所有
> el.expandNode(key) //展开某节点的所有子节点
> el.unExpandNode(key) //合并某节点的所有子节点
> el.toggleExpandNode(key) //切换某节点的所有子节点的展开合并状态
> el.remove(key) //删除节点
> el.append(key,data) //添加子节点,如果不传key,或者直接传key为null或者为空的话,则直接添加到根节点
> el.insertBefore(key,data) //添加到节点之前
> el.insertAfter(key,data) //添加到节点之后
> el.reload(data) //重新加载树
> el.search(val) //搜索树(val为搜索值),执行此方法会去执行searchNodeMethod方法,searchNodeMethod的第一个参数为val搜索值,第二个参数为每个节点的数据
> el.getAllNodeData() //获取所有的节点数据
eleTree.render({
// ...
})
// 节点点击事件
eleTree.on("nodeClick(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.event); // event对象
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
})
// input被选中事件
eleTree.on("nodeChecked(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.isChecked); // input是否被选中
console.log(d.node); // 点击的dom节点
console.log(this); // input对应的dom
})
// 鼠标右键事件
eleTree.on("nodeContextmenu(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.event); // event对象
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
})
// 节点被拖拽事件
eleTree.on("nodeDrag(data1)",function(d) {
console.log(d);
d.stop(); // 取消拖拽
console.log(d.current); // 起始节点对应的dom和数据
console.log(d.target); // 鼠标落点对应的dom和数据
console.log(this); // 鼠标落点对应的dom
})
// 添加子节点事件
eleTree.on("nodeAppend(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
d.stop(); // 取消添加
d.setData({ // 自定义数据(异步操作必须调用之后才会添加数据,如果不需要修改值,可以不传参数)
key: 666,
label: "aaa"
})
console.log(d.newData); // 新增加的节点数据
})
// 添加节点之前事件
eleTree.on("nodeInsertBefore(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
d.stop(); // 取消添加
d.setData({ // 自定义数据(异步操作必须调用之后才会添加数据,如果不需要修改值,可以不传参数)
key: 666,
label: "aaa"
})
console.log(d.newData); // 新增加的节点数据
})
// 添加节点之后事件
eleTree.on("nodeInsertAfter(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
d.stop(); // 取消添加
d.setData({ // 自定义数据(异步操作必须调用之后才会添加数据,如果不需要修改值,可以不传参数)
key: 666,
label: "aaa"
})
console.log(d.newData); // 新增加的节点数据
})
// 节点被编辑事件
eleTree.on("nodeEdit(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.node); // 点击的dom节点
console.log(d.value); // 新输入的值
console.log(this); // 与d.node相同
d.async(); // 异步操作必须调用之后才会修改
d.stop(); // 取消编辑
})
// 节点被删除事件
eleTree.on("nodeRemove(data1)",function(d) {
console.log(d.data); // 点击节点对应的数据
console.log(d.node); // 点击的dom节点
d.async(); // 异步操作必须调用之后才会删除
d.stop(); // 取消删除
})
// 自定义右键菜单回调
eleTree.on("nodeTest(data3)",function(d) {
console.group("自定义右键菜单回调nodeTest:")
console.log(d.data); // 点击节点对于的数据
console.log(d.node); // 点击的dom节点
console.log(this); // 与d.node相同
console.groupEnd();
})
1. 每次执行reload操作时,需要重新赋值给参数,即 var el=eleTree.render(...); el=el.reload(...);
2. 静态数据reload需要重新传data数据,即el2=el2.reload({data: data})
3. 使用拖拽功能最好先加载所有节点的dom, 即renderAfterExpand设为false, 两者的冲突尚未解决