Fork me on GitHub 示例链接
eleTree2.0抢先预览
快速使用

下面就是它对应的代码:


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会被清除