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 autogenera
4000
ted 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
}