jstree配置

概述：

了解一个简单demo，学习一下深入一些知识

1、配置实例

正如上一个案例一样，我们没有修改任何值，都是采用的默认值。

$('#jstree').jstree();

如果你想要即将创建的所有实例改变默认值的话

$.jstree.defaults.core.themes.variant = "large";$('#jstree').jstree();

但是大多数情况是，你只是想要为某一个实例改变默认值，这样你可以在创建对象的时候配置一个属性

增加一个复选框

$('#jstree').jstree({  "plugins" : [ "wholerow", "checkbox" ]});

如上例子所示，一个特殊的配置对象名称为plugins.它的值是字符串数组，你可以添加自己需要值。

key为core的配置对象的属性设置不会依赖于任何插件

$('#jstree').jstree({  "core" : {    "themes" : {      "variant" : "large"    }  },  "checkbox" : {    "keep_selected_style" : false  },  "plugins" : [ "wholerow", "checkbox" ]});

你可以查看所有选项和他们的默认值，这些选项你可以配置到任何实例上。举个例子，默认情况下树是允许多选的，可以通过$.jstree.defaults.core.multiple,为重写默认值，你可以如下设置：“core”:{"multiple" :false}. 如果你已经重写多个这个选项（例如"core"） 组织如下

$("#jstree").jstree({  "core" : {    "multiple" : false,    "animation" : 0  }});

2、HTML数据

2.1基本的标签

jsTree 能返回一个规律的无序列表到一棵树中。它最小的标签要求是<ul>节点和内部标签<li>节点以及文本。

你应该需要一个容器去包裹标签<ul>，然后在这个容器中实例化一棵树。就像这样：

$('#html1').jstree();

<div id="html1">  <ul>    <li>Root node 1</li>    <li>Root node 2</li>  </ul></div>

2.2.节点上又有子节点

为了在节点上创建一个子节点需要使用<ul>标签

内部jstree转化文本成一个链接时候，你不要担心，例如下面的Child node2.

点击这个链接并不会跳转到新的页面，如果你要实现跳转的功能，你可以拦截changed.jstree这个事件和与之对应的行为

请继续阅读处理事件章节

<div id="html1">  <ul>    <li>Root node 1      <ul>        <li>Child node 1</li>        <li><a href="#">Child node 2</a></li>      </ul>    </li>  </ul></div>

2.3 设置类属性来确定初始化状态

为了设置一个节点初始化被选中的状态可以在<a>元素设置jstree-clicked类属性

类似的你可以设置jstree-open类属性到任意<li>元素上是它初始化是展开的，也就是它的子元素是可见的。

一个最好的想法就是为每一个<li>元素设置唯一ID，如何事件触发异步到出台处理的时候，这个ID将会非常有用的。

…<li class="jstree-open" id="node_1">Root  <ul>    <li>      <a href="#" class="jstree-clicked">Child</a>    </li>  </ul></li>…

2.4.设置数据属性初始化状态

你可以在一个节点上使用data-jstree属性来设置初始化状态。

你可以使用组合一下任何属性：opened,selected,disabled, icon.

你可以设置节点的图标（通过任意包含/的路径），这个字符串将会修饰<i>元素，它被用来代表这个图标。

举个例子如果你使用的是Twitter BootStrap 框架，你可以使用"icon":"glyphicon glyphicon-leaf"去展示一个叶子的图标

<li data-jstree='{"opened":true,"selected":true}'>Root  <ul>    <li data-jstree='{"disabled":true}'>Child</li>    <li data-jstree='{"icon":"//jstree.com/tree.png"}'>      Child</li>    <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>      Child</li>  </ul></li>

2.5. 通过AJax加载

你可以使用AJax调用服务器返回一个html标签，这个格式如上所示，唯一区别就是这个不是写死在容器中而是服务器返回的。

为了使用这个优秀的性能，你需要使用$.jstree.defaults.core.data配置选项。

如果仅仅使用标准JQuery例如 AJAx配置，那么jstree将会自动发出一个AJAX请求返回结果将会渲染一颗树。

如果你在一个<li>节点设置类属性jstree-closed，返回中不会包含子节点，jstree将会发出另一次AJAX请求来打开这个节点

除了标准的jQuery ajax选项，你还可以提供data函数 和url，这个函数将会运行在当前实例返回内当参数通过的时候表示该节点已经加载了，这些函数返回的值将会被用作返回各自的URL和数据。

$('#tree').jstree({  'core' : {    'data' : {      'url' : 'ajax_nodes.html',      'data' : function (node) {        return { 'id' : node.id };      }    }  }});// Example response:<ul><li>Node 1</li><li class="jstree-closed">Node 2</li></ul>