本文主要是介绍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,},},]},]},});上段代码是个权限功能的分配选择，默认工作台和个人中心选择且不可点击，请注意当根节点选中且默认不可点击时，子节点会默认选中，但是可以点击，如果想要让子节点不可点击，必须在子节点继续设置。我的工作就遇到这种情况，返回的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$('#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]); });如下图
以上为这段时间的jstree的学习总结，后面学到新的将继续补充。。。
这篇关于JStree的使用总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
