仿elementUI文档重写
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(); // 取消删除
})
