jstree中文github文档

最新推荐文章于 2024-06-13 09:33:09 发布

Gyanxie

最新推荐文章于 2024-06-13 09:33:09 发布

阅读量7w

点赞数 24

分类专栏：前端 jquery 文章标签： github jquery jstree 树形控件

jstree

Bala...bala...这段就不翻译了.
jstree就是个基于JQUERY的树形控件.

jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license.

jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.

jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery’s event system, so binding callbacks on various events in the tree is familiar and easy.

You also get（更多功能）:
* drag & drop support(拖放)
* keyboard navigation（键盘导航）
* inline edit, create and delete（行内增、删、改）
* tri-state checkboxes（checkbox图标）
* fuzzy searching （模糊搜索）
* customizable node types（定义节点类型）

除了这个readme文件外，更多的信息请前往jstree.com 或者 the discussion group.

新手入门
jstree事件
jstree API
更多配置
插件
- checkbox
- contextmenu
- dnd
- massload
- search
- sort
- state
- types
- unique
- wholerow
- 其他插件
PHP demos 已经移动到新的代码仓库
License & Contributing

新手入门

引入脚本

需要引入3个脚本文件:
1. jQuery (>= 1.9.1)
2. 一个jstree主题 (默认只有一个主题)
3. jstree资源文件

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>

If you decide to host jstree yourself - the files are located in the dist folder. You can safely ignore the dist/libs folder.

用html标签定义树

最简单的定义方法是用写死在HTML中.你只需要用jquery选择要渲染成jstree的dom元素，然后调用 .jstree()渲染就可以了。也可以用 $.jstree.create(element) 的方式渲染。

<div id="container">
  <ul>
    <li>Root node
      <ul>
        <li>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>
<script>
$(function() {
    
  $('#container').jstree();
});
</script>

查看代码执行结果

jstree支持用data-*属性来设置选项:

<li data-jstree='{ "selected" : true, "opened" : true }'>Root node ...

用js数组或者JSON格式定义树

HTML定义方法比较简单, 但不够灵活，所以提供了更为灵活的JS方法:

<div id="container"></div>
<script>
$(function() {
    
  $('#container').jstree({
    'core' : {
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
          ]
        }
      ]
    }
  });
});
</script>