jstree -- 使用JSON 数据组装成树

jstree -- 使用JSON 数据组装成树

 

资源下载：http://download.csdn.net/detail/u012954072/9670907

JStree官网：https://www.jstree.com

1.使用：

a. 需要jstress定义的样式

样式文件在dist/themes/default/style.min.css 中，所以html页面中需要添加代码 

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

需要包含CDNJS的css文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

b. 需要使用jQuery1.9.0以上：

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

c. 包含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>

2.加载配置，设置配置

1.首先在html代码中生成一棵树建立空的节点，取一个唯一的id；

<div id="data"></div>

2. 之后就可以通过js来生成树啦，先用jQuery获取DOM对象，接着调用jsTree的API来生成树，如下所示：

$('#treeDemo').jstree({

     'core': {

                    "animation" : 0,

                    "check_callback" : true,

                    "themes" : { "stripes" : true },

                    'data': {!! $aSingelData !!}, //php传过来的json格式数据

                    'multuple':true,

 

                },

});

其中data这个参数都有哪些属性可以来设置，官网的API介绍的不全，我在浏览器检查其里获取了一下data对象，列入data参数的所有属性

a_attr: Object // 生成一个a标签节点的属性

li_attr: Object // 生成一个li标签节点的属性

children: Array // 所有子节点数组

data: Object // 此节点的数据（没传过。。）

icon: String // 此节点的图标（没传过。。）

id: String // 节点唯一的id，如果不传会默认生成

original: Object // 后台传过来的这个节点的所有数据

parent: String // 父节点的id

parents: Object // 所有的父节点数组

state: Object // 节点状态，这里面有五个固定属性，可以传默认值

// 分别是“checked”、“disabled”、“loaded”、“opened”、“selected”，均为布尔值

text: String // 节点显示的文本

type: String // 节点的类型，我只用过默认“default”

当然生成树除了data参数，还有很多别的参数可以设置，以下写一些我用过的，更详细请查阅官方API文档

当然生成树除了data参数，还有很多别的参数可以设置，以下写一些我用过的，更详细请查阅官方API文档

3.插件

jsTree有些功能被移除核心，只有你需要的时候才使用它，为了确保使用插件，需要使用plugins参数配置选项，将插件名称添加到一个数组中。

常用到的插件有

"plugins" : [

 "checkbox",//复选

 "contextmenu",//菜单

"dnd",//拖动                  

"search",//搜索

  "sort",//排序

"types",//类型

]

还有更多具体查阅官网文档。

4.例子：

<script type="text/javascript">
     $('#data').on('move_node.jstree',function (e,data)     {      //拖拽移动
     var id=data.node.id,
     parentid=data.parent;
     if(parentid=='#'){
       parentid=0;
       }
     position=data.position //相对于它本身前面有多少个节点位置.例如等于0，则它前面无节点,即它的下标位置就是0;
    var url='/adm/article/remove-to-tag';
    var data={
        '_token': $("#_token").val(),
        'id':id,