jstree使用【一】初次使用

第一步 引入 需要本地引入的可去官方地址下载源码
1.style.min.css

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

2.jquery.min.js

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

3.jstree.min.js

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

第二步在需要加载jsTree的Html位置处加入

  <div id="jstree_vehicle"></div>

第三步写jstree的调用方法

    function treeInit(data) {        $('#jstree_vehicle').jstree({            'core': {                'data': {                    'url': COMMON.fenbiaoPath + "singleVehicleTrack.queryEntVehicleGroupVehicleTreeInfo.action",                    'dataType': "json",                    'data': function (node) {                        return {'vehicleMaster': node.id, 'index': node.type, 'tokenStr': COMMON.token};                    }                }            }        })    }

这是一颗异步加载的车辆树，
core.data.url:加载时获取数据的地址
core.data.dataType：获取数据的类型
core.data:异步加载结点数据时，需要向后端接口请求的数据时，所需要传给后端的参数。

jstree支持返回接口数据的格式有两种
第一种：嵌套数据的形式

{  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}

第二种 指定父id的形式。个人更喜欢使用第二种。值得注意的是第二种形式，必须指定父节点，当第一级为更节点时得指定他的父结点为“#”。

{  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}