jsTree 预览与入门

来源：互联网发布：mac hexo搭建个人博客编辑：程序博客网时间：2024/06/07 03:24

概述：

在做权限需要使用jsTree,顺便学习翻译部分一下jsTree，jsTree是jquery插件，它提供可以交互的树形结构。在MIT许可下，它具有完全免费的，开源和分布式的特点，jsTree也是很容易进行扩展，主题化和配置化。它支持HTML和JSON数据源和Ajax加载。

jsTree的函数恰当应用的盒模型（内容盒和边缘盒），它可以作为一个AMD（异步模块加载机制）模块。它已经被内置到手机主题的响应式设计中，它也很容易进行自定义。它使用的JQuery的事件系统。在树形中为众多事件绑定回调是非常随便和容易的。

1. 下载 jsTree 或使用 CNDJS在线加载

如果你选择下载的话-所有你需要的文件都在你下载的dist/文件夹下

2.引入一个jsTree 主题

主题本身将会自动加载，但是最好的实践就是将相关的css文件引入。

如果你本地下载的，根据具体路径引用：

<link rel="stylesheet" href="dist/themes/default/style.min.css" />

如果你使用CDNJS在线加载方法：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

3.构建一个容器

这个容器将会用来装你设置的树。一个<div>标签就足够了，这个例子中有一个内部<ul>无序列表标签，没有其他数据源配置（例如JSON）

<div id="jstree_demo_div"></div>

4.引入JQuery

jsTree要求Jquery1.9.0及以上的版本，你可以使用CND版或者是本地下载的Jquery

例如CND版

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

5.引用jsTree

如果你已经下载到你本地：对于是生产环境采用压缩版：dist/jstree.min.js,对于开发调试采用原版：dist/jstree.js

<script src="dist/jstree.min.js"></script>

如果是CDNJS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

6. 创建一个实例

一旦网页的DOM结构加载完毕之后，你就可以实例化jstree实例

$(function () { $('#jstree_demo_div').jstree(); });

7.监听事件

jsTree 使用事件实现用户和树列表进行交互。对于tree绑定事件最简单就是点击事件，API文档提供一系列事件详细说明：点击打开链接

$('#jstree_demo_div').on("changed.jstree", function (e, data) {  console.log(data.selected);});

8.与你创建的实例进行交互

一旦实例化之后，它就可以进行调用方法，详情的方法API：https://www.jstree.com/api/#/?q=(
三种选中的方法：

$('button').on('click', function () {  $('#jstree').jstree(true).select_node('child_node_1');  $('#jstree').jstree('select_node', 'child_node_1');  $.jstree.reference('#jstree').select_node('child_node_1');});

9.完整的代码

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>jsTree test</title>  <!-- 2 load the theme CSS file -->  <link rel="stylesheet" href="dist/themes/default/style.min.css" /></head><body>  <!-- 3 setup a container element -->  <div id="jstree">    <!-- in this example the tree is populated from inline HTML -->    <ul>      <li>Root node 1        <ul>          <li id="child_node_1">Child node 1</li>          <li>Child node 2</li>        </ul>      </li>      <li>Root node 2</li>    </ul>  </div>  <button>demo button</button>  <!-- 4 include the jQuery library -->  <script src="dist/libs/jquery.js"></script>  <!-- 5 include the minified jstree source -->  <script src="dist/jstree.min.js"></script>  <script>  $(function () {    // 6 create an instance when the DOM is ready    $('#jstree').jstree();    // 7 bind to events triggered on the tree    $('#jstree').on("changed.jstree", function (e, data) {      console.log(data.selected);    });    // 8 interact with the tree - either way is OK    $('button').on('click', function () {      $('#jstree').jstree(true).select_node('child_node_1');      $('#jstree').jstree('select_node', 'child_node_1');      $.jstree.reference('#jstree').select_node('child_node_1');    });  });  </script></body></html>

效果如下：

阅读全文

0 0

jsTree 预览 与入门