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() //获取所有的节点数据 > el.setHighlightNode(key) //设置高亮选中节点(highlightCurrent参数必须为true) > el.getHighlightNode() //获取当前高亮选中的节点
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, 两者的冲突尚未解决
4. bug: 执行某些方法之后,手动选中的checked会被清除