前言
jstree是一个比较好用的，可定制化支持较好的一个jQuery树组件，最近项目里用到了它，但是发现网上的文档以及使用方式并不适合当前项目的实际开发，又或者是英文看起来比较复杂，因此对这次使用做出相关记录，以备不时之需。
实例代码
/**
* 构建课程结构树
*/
var jsTreeComponent = {
init: function () {
/*发起ajax请求*/
$.getJSON('/你后台获取树结构的api'), function (data) {
/*这一块的逻辑根据自己的需求进行处理*/
if (data.success != true) {
$jsTree.html('加载失败');
return;
} else if (data.data.structureList.length == 0) {
$jsTree.html('暂无数据');
return;
}
var structList = data.data.structureList;
/*以下是jstree所需对象的特定格式（如果是异步请求，那么是另外一种格式，这里就不多介绍了）*/
var jsTreeBean = {
id: "string", // 必要的参数
parent: "string", // 必要的参数
text: "string", // 节点名称
icon: "glyphicon glyphicon-tag", // 图标，可使用自定义样式
state: {
opened: true, // 配置是否打开
disabled: false, // 配置是否不可选中
selected: false // 配置是否选中
},
li_attr: {}, // attributes for the generated LI node
a_attr: {} // attributes for the generated A node
};
var jsTreeBeanList = [];
/*根据后台返回来构建jsTreeBean对象，且填充到jsTreeBeanList数组*/
for (var i = 0; i < structList.length; i++) {
var current = structList[i];
var newObj = Object.assign({}, jsTreeBean);
newObj.id = current.id;
newObj.text = current.name;
newObj.cusLevel = current.level; //自定义的层级，0是章，1是节
if (current.level == 0) {
newObj.icon = 'glyphicon glyphicon-bookmark';
newObj.parent = '#';
} else {
newObj.parent = current.parentId;
}
jsTreeBeanList.push(newObj);
}
/*核型配置类，用于使用构建好的数组生成树*/
$jsTree.jstree({
'core': {
'check_callback': true,
'data': jsTreeBeanList
}
});
});
},
/*事件对象*/
eventListener: function () {
/*监听'改选'这个事件，其他事件的监听参考官方文档*/
$jsTree.on("changed.jstree", function (e, data) {
/*如果点击的cusLevel是1（节），则获取学习资源*/
if (data.node.original.cusLevel == 1) {
service.loadLearnResources(data.node.id)
}
});
}
};
