什么是jsTree?

jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的,并根据MIT许可进行分发。jsTree易于扩展,可定义和配置,它支持HTML和JSON数据源以及AJAX加载。

jsTree可以在盒子模型(内容框或边框)中正常运行,可以作为AMD模块加载,并具有用于响应式设计的内置移动主题,可以轻松自定义。它使用jQuery的事件系统,因此对树中各种事件的绑定回调是熟悉且容易的。

仅有的一些功能值得注意:

  • 拖放支持
  • 键盘导航
  • 内联编辑,创建和删除
  • 三态复选框
  • 模糊搜索
  • 可定制的节点类型


Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+
以上的旧版本可能可以运行,但未经测试


  下载

  • 根节点 1
    • 最初 选择
    • 自定义图标网址
    • 最初开放
      • 另一个节点
    • 自定义图标类 (bootstrap)
  • 根节点 2

使用JSON填充树

格式

jsTree需要特定的格式才能使用JSON。在标准语法中,不需要任何字段-仅传递您需要的内容。请记住,您将能够访问您指定的任何其他属性-jsTree不会触及它们,以后您将能够使用它们(original在每个节点上使用该属性)。

要更改节点的图标,请使用icon属性。指定包含的字符串/将显示该图像作为节点图标。使用任何其他字符串将把该类<i>应用于用于表示图标的元素。您可以使用布尔值false使jsTree渲染不带图标的节点。

您可以使用该state属性在节点上设置状态。使用以下的任意组合:opened, selected, disabled.

双方li_attra_attr直接传递到jQuery的ATTR功能。

当使用设置children为boolean的AJAX时true,jsTree会将节点呈现为关闭状态,并在用户打开该节点时对该节点发出附加请求。

任何嵌套的子代都应该是遵循相同格式的对象,或者是纯字符串(在这种情况下,该字符串用于节点的文本,其他所有东西都是自动生成的)。

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

备用JSON格式

如果您不想使用嵌套children方法,则可以使用备用语法,其中每个节点对象都有两个必填字段:id & parent 和没有children属性(其他所有内容保持不变)。

jsTree将自动构建层次结构。为了指示节点应该是根节点,请将其parent 属性设置为 "#".

主要在一次渲染整棵树时使用,当使用邻接关系将数据存储在数据库中时,这很有用。

// Alternative format of the node (id & parent are required)
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

使用JSON

要用JSON对象填充树,您需要使用$.jstree.defaults.core.data 配置选项

期望的格式是节点数组,其中每个节点都应该是如上所述的对象或简单的字符串(在这种情况下,该字符串用于节点的text属性,其他所有内容都是自动生成的)。嵌套节点children的父属性以相同的方式提供。

$('#using_json').jstree({ 'core' : {
    'data' : [
       '简单的根节点',
       {
         'text' : '根节点 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : '子 1' },
           '子 2'
         ]
      }
    ]
} });

使用其他JSON格式

$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "简单的根节点" },
       { "id" : "ajson2", "parent" : "#", "text" : "根节点 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "子 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "子 2" },
    ]
} });

使用AJAX

您还可以使用AJAX用服务器返回的JSON填充树。格式与上面相同,唯一的区别是JSON不在config对象内部,而是从服务器返回的。

要利用此选项,您需要使用$.jstree.defaults.core.data 配置选项.

只需使用类似jQuery的标准AJAX配置,jstree就会自动使AJAX请求填充响应。

除了此处的标准jQuery ajax选项之外,您还可以为dataurl,这些函数将在当前实例的范围内运行,并且将传递参数以指示要加载的节点,这些函数的返回值将用作URL。和数据。

如果您没有从服务器返回正确的json标头,则至少将dataTypejQuery AJAX选项设置为"json".


$('#tree').jstree({
'core' : {
  'data' : {
    'url' : function (node) {
      return node.id === '#' ?
        'ajax_roots.json' :
        'ajax_children.json';
    },
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});
						

使用功能

您也可以提供功能。该函数将接收两个参数-正在加载的节点,以及准备就绪后将使用该节点的子代调用的回调函数。


$('#tree').jstree({
    'core' : {
        'data' : function (obj, cb) {
            cb.call(this,
              ['Root 1', 'Root 2']);
        }
    }});
						
www.jstree.com.cn    jstree中文网    [英文站]