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"}); 新建节点

jstree用法小结,布布扣,bubuko.com