用jstree实现前端页面简单笔记

最近领导安排了一个项目，做一个考试系统的管理界面，涉及到很多单位，每个单位有好多部门，就是一个树形的数据结构，由于本人以前都是搞嵌入式方向的，对前端编程不是太熟悉，只会用简单的HTML+JS+CSS来写前端界面，于是乎采用最原始的方法，在网上找例程，看有没有相似的源码，找了好久，害得我还充了个优快云会员来下载源码，最终还是找着一个相对较成熟的，是用jstree插件来实现树形结构，可以直接拿来用，但由于版本太老，还是出了一些问题，后来依照官网采用最新的插件版本，终于可以正常使用，在此做一些简单的说明。

其实用起来也非常简单，这些插件都是封装好的，你要用的时候无非就是一下几个步骤：

        1.上官网，看教程。如下是jsTree中文网的地址，只需点进去就可查看其用法。

jsTree 中文网JsTree是一个jquery的插件,它提供一个非常友好并且强大的交互性的树,并且是完全免费或开源,Jstree技持Html或json格式的的数据,或者是ajax方式的动态请求加载数据。http://www.jstree.com.cn/

        2.按官网要求包含文件，将官网说要包含的jsTree主题、jQuery、jsTree包含，直接复制过来就好，如下：

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

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

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

 3.找到你要创建树形目录的div，取它的id，然后在js文件中把官网上创建一个实例这条复制上去。如下：

$(function () { $('#这里填你要创建树的id').jstree(); });

 4.填充树，我是使用JSON填充树，因此点击官网json这儿，去那抄。

 5.往下翻，找一个顺手的格式，填充jstree()函数，我用的是如下格式。

      6.按照json对应的格式往里填就行了，'data'后就是树形结构的json数据，按照格式复制填就行了，当然这个json可以写在外面，这写个变量就好，不然太长了看着难受，这个但凡学过两天编程的人应该都会。

     7.添加点击事件或者其他操作。

可以采用如下这种绑定事件的方式。

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

也可以采用插件， 非常的方便。

这样就简单介绍完了，简单明了。