eleTree文档说明

eleTree.render()参数说明

1. elem: "", //指定原始 table 容器的选择器或 DOM

2. data: [], 直接赋值数据

3. emptText: "暂无数据", // 内容为空的时候展示的文本

4. renderAfterExpand: true, // 是否在第一次展开某个树节点后才渲染其子节点

5. highlightCurrent: false, // 是否高亮当前选中节点，默认值是 false。

6. defaultExpandAll: false, // 是否默认展开所有节点

7. expandOnClickNode: true, // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

8. checkOnClickNode: false, // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。

9. defaultExpandedKeys: [], // 默认展开的节点的 key 的数组

10. autoExpandParent: true, // 展开子节点的时候是否自动展开父节点

11. showCheckbox: false, // 节点是否可被选择

12. checkStrictly: false, // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false

13. defaultCheckedKeys: [], // 默认勾选的节点的 key 的数组

14. accordion: false, // 是否每次只打开一个同级树节点展开（手风琴效果）

15. indent: 16, // 相邻级节点间的水平缩进，单位为像素

16. lazy: false, // 是否懒加载子节点，需与 load 方法结合使用

17. load: function() {}, // 加载子树数据的方法，仅当 lazy 属性为true 时生效

18. draggable: false, // 是否开启拖拽节点功能

19. contextmenuList: [], // 启用右键菜单，支持的操作有："copy","add","edit","remove"

20. method: "get", // 接口http请求类型，默认：get

21. url: "", // 异步数据接口

22. contentType: "", // 发送到服务端的内容编码类型

23. headers: {}, // 接口的请求头。如：headers: {token: 'sasasas'}

24. done: null, // 数据请求完成的回调函数，只有异步请求才会有

25. response: { // 对于后台数据重新定义名字

statusName: "code",

statusCode: 0,

dataName: "data"

},

26. request: { // 对后台返回的数据格式重新定义

name: "label",

key: "id",

children: "children",

checked: "checked",

disabled: "disabled",

isLeaf: "isLeaf"

},

27. searchNodeMethod: null // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏

基础方法

var el=eleTree.render({
// ...

})

> el.updateKeyChildren(key,data) // 更新子节点

> el.updateKeySelf(key,data) //更新当前节点

> el.getChecked(leafOnly, includeHalfChecked) // 获取选中的节点，接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false

> el.setChecked(arr) //设置选中的节点，传入数组key值

> el.unCheckNodes() //取消所有选中的节点

> el.expandAll() //展开所有

> el.unExpandAll() //合并所有

> el.remove(key) //删除节点

> el.append(key,data) //添加子节点

> el.insertBefore(key,data) //添加到节点之前

> el.insertAfter(key,data) //添加到节点之后

> el.reload(data) //重新加载树

> el.search(val) //搜索树(val为搜索值)，执行此方法会去执行searchNodeMethod方法，searchNodeMethod的第一个参数为val搜索值，第二个参数为每个节点的数据

事件监听

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"

})

})

// 添加节点之前事件

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"

})

})

// 添加节点之后事件

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"

})

})

// 节点被编辑事件

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.stop(); // 取消编辑

})

// 节点被删除事件

eleTree.on("nodeRemove(data1)",function(d) {
console.log(d.data); // 点击节点对于的数据

console.log(d.node); // 点击的dom节点

d.stop(); // 取消删除

}