首页 > 代码库 > jstree用法小结
jstree用法小结
jstree是一款功能强大的插件。官网地址http://www.jstree.com/
$(‘#jstree‘).jstree({ "core" : { "animation" : 0, "themes" : { "dots": true,"icons":true ,"stripes":false}, "check_callback" : true, "multiple" : false, ‘data‘ : data }, "types" : { "#" : { "max_children" : 5, "max_depth" : 11 , }, "default" : { "icon" : "false", "valid_children" : ["default","text"] }, "text" : { "icon" : "false", "valid_children" : [] } }, "plugins" : [ "state", "types", "wholerow" ] });
$.jstree.defaults.core 级有很多api,可以在初始化时设置。
如果对树的分层有要求,特别是叶子节点作为文档,父节点作为文件夹这类要求时,要对type做出设置。
-------------------------------------------------------------------------------------------------
max_children
当前节点最多拥有的孩子树。不设置或设置为-1代表无穷。max_depth
当前节点最多能含有的子节点。如1代表有孩子节点,没有孙子节点。不设置或设置为-1代表无穷。valid_children
一个string组成的数组。代表这些string类型可以含有孩子节点.不设置或设置为-1代表无穷。icon
a 一个 string,可以是路径或者className。如果用当前目录下的img,路径设为./xxx.png,不然会被设置为class。省略的话会用default的icon作为你的theme
There are two predefined types:
#
代表根节点的id.default
所有没设定的属性都按照default来.
-------------------------------------------------------------------------------------------------
在types里,我为#设置了最深层次为11,给default设置了可以拥有default和text的子节点,给text子节点设置为空。这样新建一个text节点就不能再建立子节点了。
由于项目要求不需要icon,所以把icon设定为false。
项目要求折叠树设置为 + 和 - 号,我们可以改变style.min.css的jstree默认css文件,插入我们自己的图片。它默认的图标是放在一张大图里的,通过background的position来定位。要小心icon和折叠处的图在一起,改变其中一个可能会影响到其他的。可以根据他们所处的class增加一些css源文件代码。
plugins是jstree的插件array。它的插件可以实现拖拽等功能。需要添加的插件放入这个array就可以了。
--------------------------------------------------------------------------------------------------
create,rename,remove,upmove,downmove
var ref = $(‘#jstree‘).jstree(true), sel = ref.get_selected();
ref是获取整个jstree(不懂怎么描述。。。api里的很多都要以ref开头);
ref.get_node(sel)获取sel节点
ref.delete_node(sel);删除节点
sel = ref.create_node(sel, {"type":"text"}); 新建节点