ztree是一个基于jQuery编写的树插件,就我目前使用来看,性能优异、功能强大(几乎能实现你想要的任何功能)、配置灵活、使用简单,需要的数据结构也很简单,上万节点也能轻松加载,响应事件丰富。
https://gitee.com/zTree/zTree_v3
下载插件后,把下载的文件放到项目任意位置,在页面中分别引入ztreeCSS、jQuery、ztreeJs,然后在页面中写一个标签用于存放ztree,设置id和class="ztree"即可。
在该页面js文件中,初始化ztree,如下图所示,setting为配置参数,可以不填;zNodes为ztree数据,数据可以通过ajax异步获取,或者在页面写json数据,至此就初始化完成了。
基础
不显示图标
复选框
单选框
查找节点
拖拽节点
多树之间数据交互
编辑、删除
官方网站:
http://www.treejs.cn/v3/main.php#_zTreeInfo
ztree功能很强大,在我第一次使用时就感受到了,通过不同功能的组合可以完成我们需要的需求,唯一差一点的就是外观,前端厉害的大神可以自己写一套样式,这样就完美了,他的功能还包括冻结节点、自定义节点图标、节点绑上超链接、分批异步加载数据、自定义控件、右键菜单、其他dom拖拽交互等,想要看更多dome或者学习的可以去ztree官网了解详情。 |