首页 > 代码库 > 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"}); 新建节点