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的学习总结，后面学到新的将继续补充。。。

JStree的使用总结相关推荐

基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用...
为什么80%的码农都做不了架构师?>>> 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap ...
jsTree设置默认节点全部展开的方法
最近项目有需求,当jsTree加载完毕的时候想让所有的节点都打开,便于用户操作,遂参考API,这里记录下来.好记性不如烂笔头: //jsTree的初始化$tree.jstree({'plugins': ...
jsTree 插件Ajax数据
完整代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><meta na ...
【笔记】jstree插件的基本使用
官网地址:https://www.jstree.com/ json返回参数格式:推荐第二种方式不需要在重新拼接返回格式不刷新页面重新初始化 jstree时使用:$.jstree.destroy() ...
SpringBoot+Jquery+Jstree实现企业架构管理
场景效果 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90 ...
JsTree中提示：Cannot read property 'core' of underfined
场景 Jstree的树形结构正好好运行,给数据添加了禁用状态后,就提示: 在仔细比对代码没错订单情况下,猜测是数据原因. 实现因为添加了是否禁用状态,首次进入页面时默认加载启用的数据,但是启用的数据 ...
SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID
场景 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897 ...
Sqlserver中使用ISNULL、CAST、CASE完成对jsTree数据的查询
场景 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897 ...
SpringBoot+Jquery+jsTree实现页面树型结构
场景效果 jstree官网 https://www.jstree.com/ 实现引用CSS样式使用cdn或者将其下载 <link rel="stylesheet" hr ...
java 预览zip_java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览采用Spring+Sp ...

JStree的使用总结

JStree的使用总结相关推荐

最新文章

热门文章