JStree的使用总结

最近的前端工作用到一个ui库中封装的结构，叫jstree，其主要功能就是数据的展示，选择，编辑，因为在网上找的资料东一块西一块的，对新手学习很不方便，所以把我最近的学到的总结下。

首先说jstree的结构，它有固定的结构组成，且只是别关键字,树的结构关键字分别为plugins，core，data. 其中plugins类似于c语言中的包含，可以包含样式，选择框，图片等，而core主要功能是控制树的形状，单选多选等等，data顾名思义就是填充数据的，这个数据可以直接书写，那样的就是静态的树，还有用json返回的方式填充，那样的可以实现动态的树（还有好几种填充方式，可查api）

当然在data中也是需要识别格式的，data的关键字为id, text,children这三个关键字是树形成的必要条件，展示时显示的是text，传递的可以是id也可以是text,树的控制关键字是state,他的作用是可以控制某些节点默认不可点击，选中等。

这个在json串返回时格式一定要设置好，不然还需要自己手动转换，那样会变的很复杂，下面也会讲到如何将不符合需求json手动转换为符合需求的。

下面是我自己写的一个静态的jstree：

$('#tree_2').jstree({
'plugins': [ "themes","checkbox"],
'core': {
"themes" : {
"theme": "classic",
"dots": true,
"icons": false
},
'data': [
{
"id":"00",
"text": "工作台",
"state": {
"selected": true,
"disabled": true,
},
},
{
"id":"01",
"text":"企业管理",
"children": [{
"id":"0101",
"text": "企业信息管理",
}, {
"id":"0102",
"text": "企业证照管理",
},
]
},
{
"id":"02",
"text":"商品管理",
"children":[{
"id":"0201",
"text":"生产企业商品管理"
},{
"id":"0202",
"text":"商品溯源",
},{
"id":"0203",
"text":"商品分布",
},
]
},
{
"id":"03",
"text":"企业管理",
"children":[{
"id":"0301",
"text":"企业信息查询",
},{
"id":"0302",
"text":"企业证照服务",
},
]
},
{
"id":"04",
"text":"个人中心",
"state": {
"selected": true,
"disabled": true,
},
"children":[{
"id":"0401",
"text":"修改密码",
"state": {
"selected": true,
"disabled": true,
},
},{
"id":"0402",
"text":"修改绑定手机",
"state": {
"selected": true,
"disabled": true,
},
},{
"id":"0403",
"text":"锁屏",
"state": {
"selected": true,
"disabled": true,
},
},{
"id":"0404",
"text":"退出",
"state": {
"selected": true,
"disabled": true,
},
},
]
},

]
},

});

请注意格式，children 是用[  ]，data 中的每个元素是{ }.

上段代码是个权限功能的分配选择，默认工作台和个人中心选择且不可点击，请注意当根节点选中且默认不可点击时，子节点会默认选中，但是可以点击，如果想要让子节点不可点击，必须在子节点继续设置。我的工作就遇到这种情况，返回的json不会有这个state数据设定，所以我需要自己加这个属性。

这个是填充json的jstree：

$('#powerTree').jstree({
'core': {
'data': $scope.filter.data,
"themes": {
"theme": "classic",
"dots": true,
"icons": false
},
},
"plugins": ["themes", "json_data", "search", "checkbox"]
});

$scope.filter.data中存储的接口返回的json串，上例是个多选树，"multiple": false,可以控制单选多选

$scope.filter.data中存储是接口返回的json串,上例是个多选树，"mutiple":false,可以控制节点单选多选

这个是查询后台返回数据然后填充到树，但是默认是要选中的，后台没有选中这个关键字，所以首先想到的就是加入关键字，思想是这样的，首先将json串转化为字符串，然后在末尾添加关键字字符串，然后再转回json串。

首先是数据读入json对象，然后选则第一个

var str=JSON.stringify(result[0].RoleJson.Menu[i]);//转化字符串
var str1=str.substring(0,str.length-1)+',"state": {"selected": true,"disabled": true}}';//尾部有}，所以取子串再添加
$scope.filter.data.push(JSON.parse(str1))//转化为json

for循环找你需要添加的那个id,然后按上面的步骤转化，但是这样做确实很麻烦，所以就有了下面的一种方法，在介绍下面填充方式首先要介绍树的类似监听的函数
$('#powerTree').on("changed.jstree", function(e, data){};

这个函数是选择后触发的函数，当你改变了选择时他会自动监听，当然不只这一个函数，这里用到了加载时用到的函数
$('#powerTree').bind("loaded.jstree", function (e, data){};

这个函数是在加载树的时候默认的某些操作执行。所以我们可以在这个函数中做很多操作。下面说如何在这样的函数中执行某些节点选中。
$('#powerTree').jstree('check_node',['17','18']);//中括号中是可以选中的某些节点的id，这个可以多选也可以多选。

所以我们就可以直接在初始化的时候默认选中，但是这个只是选中，没法不可点击，所以想要做到选中且不可点击，还是需要前面那个方法

下面的是完整的代码：

$('#powerTree').bind("loaded.jstree", function (e, data) {
for (var i = $scope.filter.data1.length - 1; i >= 0; i--) {
$("#powerTree").jstree('check_node',[$scope.filter.data1[i].id]);
}
});

这就可以实现默认选中。
可以我的业务并不选中就ok了，还需要赋予各个角色的权限的查询并且编辑，上面的是父账号的权限查询的，然后下面有子账号，由父账号的权限往下分配，查询到的子账号的权限需要在父账号的目录中选中，其实有上面的基础知识了很简单，一个借口查子权限，得到id，然后查父账号填充树显示，但是我遇到了一个很蛋疼的问题是，我用的是模态框显示的树，每次查询后预加载后第一个是ok的，但是后面再掉树的时候还是那个树，每次都一样，后来才知道树的预加载只会加载一次，如果还是原来的树就一直是哪个样子，当时我很纠结，每次只有第一个是好的，其他的都和第一个一样，那就等于没做，所以我就又想到用原来的老办法，打开json转为字符串添加关键字的办法，但是太复杂所以放弃了，后来发现只需要删除树的结构，再次加载下就ok了，无语整个下午。

删除树的代码如下：

$('#powerTree').jstree("destroy")

这个东西很重要，我后来又做了一个动态的编辑树，就是在树中加节点时，每次加后都没法显示出来，只有重新刷新才能显示，其实就是树没有刷新，但是你不将这个原来的树删除，就算新的数据返回了，你的树还是不变，所以只能删除后再掉接口从新填充数据才会显示编辑后的树。

当然，在树种还有其他的一些操作，比如刚加载时树是折叠成一个标签的，所以显示起来就很难看，所以有一个展开全部节点的方法，代码如下：

$('#powerTree').jstree('open_all');

这段代码可以展开树的所有节点，如果节点过多就会显得很臃肿，不美观，当然我们也可以选择展开某一层或者第一层，代码如下：

$("#manageOfficeTree").bind("loaded.jstree", function (e, data) {
data.instance.open_node($scope.filter.manageOffices[0]);
});在open_node里的参数是你要打开某层的根节点的id，当然不建议写死，所以用json中的数据来选择就可初始化展开某层节点
如下图



以上为这段时间的jstree的学习总结，后面学到新的将继续补充。。。